标签: javascript-events

如何在JavaScript中向我自己的类的对象添加事件侦听器和调度事件？
在ActionScript 3中,我可以简单地从Sprite/DisplayObject继承并使用那里可用的方法.像这样:

// ActionScript-3:
// I can add event listeners to all kinds of events
var mySprite: Sprite = new MySprite();
mySprite.addEventListener("my_menu_item_click", onMenuItemClick);

// later I can dispatch an event from one of my objects
mySprite.dispatchEvent(new Event("my_menu_item_click", ...));

我希望在JavaScript中也一样.到现在为止我知道window.addEventListener(...)和document.addEventListener(...).到目前为止,我在JavaScript中有自己的Sprite类,我想用它来发送我自己的事件.

// JavaScipt:
function Sprite()
{
    this.x = 0;
    this.y = 0;
    // ...
}

由于这两种语言看起来与事件"相似",我想我需要继承某些类？或者我是否必须使用一些全局变量,如窗口和/或文档？

我在这里使用HTML5.我只有1个画布和一堆精灵被吸引到用户输入.我想要一个精灵A来订阅另一个精灵B的事件.但是不要给第三个精灵C.

当我使用"click"事件时,我的代码可以正常工作,并且会阻止表单提交.但是,当我使用此代码时,它不会.为什么？

submitMessage.addEventListener('submit', sendMessage, false);

function sendMessage(event){
    event.preventDefault();
    console.log('made it');
}

我正在使用Dropzone和Laravel.目前,图像正在上传到S3.

但我需要知道一种方法,我可以知道文件上传完成后,还可以获取他们的网址.

目前这个:(使用文档)

        var token = "{!! csrf_token() !!}";
        $("div#dropzoneFileUpload").dropzone({
            url: "/project/uploadImage",
            params: {
                _token: token
            }
        });
        Dropzone.options.dropzoneFileUpload = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            accept: function(file, done) {

            },
            init: function() {
                this.on("addedfile", function(file) {
                    alert("Added file.");
                });
            }
        };

添加文件时不会发出任何警报,事件似乎没有任何效果.

任何帮助？

作为参考,这是我创建的div:

<div class='dropzone' id='dropzoneFileUpload'></div>

我目前正在学习JavaScript,并且在操作事件方面遇到了麻烦.我想添加一个事件,它将text在HTML的某些字段中注册输入,操作它们,并在alert框中显示结果.

这是HTML代码:

    <form name="order" onSubmit="totalPrice()">
        <p><label><input type="text" name="apples" onblur="apples()"/> Apples</label></p>
        <p><label><input type="text" name="oranges" onblur="oranges()"/> Oranges</label></p>
        <p><label><input type="text" name="bananas" onblur="bananas()"/> Bananas</label></p>
        <p><input type="reset" value="Reset"/>
        <input type="submit" value="Submit Query"/></p>
    </form>

这是JavaScript:

    var total = 0;

    function apples ()
    {
        var a = document.order.apples.value;

        total += a * 0.75;
    }

    function oranges ()
    {
        var o = document.order.oranges.value;

        total += o * 0.60;
    }

    function bananas ()
    {
        var b = document.order.bananas.value;

        total += b * 0.50;
    }

    function …

我试图改变它的内容,<div>只要它徘徊.但是,在这样做时,我遇到的问题是选择没有下降.怎么纠正这个？appendChild()方法可能会解决问题,但我试图只用它.innerHTML.

<div id = "navigation" onmouseover = "navigationAnimate()">
Fun
</div>

<script>
function navigationAnimate() {
    navigation.innerHTML = "<select>  <option>Finance</option> <option>Health</option><option>Fun</option><option selected>Maths</option><option>Conveters</option><option>Chronology</option><option>Sciences</option><option>Miscellaneous</option></select>";
}
</script>

我需要在视频JS中创建一个自定义事件，该事件会在播放过程中的某个时间点触发。

例如：

player.on('timeupdate',function(){
    if(player.currentTime> 50){
        // trigger some custom event like 'played50Second'
    }
});

然后我想做：

player.on('played50Second',function(evt){
    console.log('Great Job, you played 50 second of the video!!!')
});

我该如何实现？

如何在音频播放时使用咆哮js并更新进度栏？

我假设我使用了其中一个pos，seek但是似乎无法正常工作。

我可以创建一个on事件侦听器以在每次位置更改时进行更改吗？

进度栏HTML：

<progress id="progress_bar" value="0.0" max="1.0" style="-webkit-appearance: none; appearance: none; height: 48px; float: left;"></progress>

咆哮js：

on ('update_progress', function() {
    document.getElementById('progress_bar').value = audio.pos();
}),

然后，如果按下进度条，如何更新音频的位置。我认为在这种情况下使用输入范围可能会更好。

我有一个我想捕获mousemove事件的反应容器。这很简单。此外，我有一个由容器渲染的react子组件，该组件实际上是mousemove事件处理程序的逻辑所在。因此，我需要将mousemove事件从容器父级传递/委托给子级，并获取所调用子级的mousemove处理函数。如何正确完成？

我需要在容器而不是子组件中捕获鼠标事件，因为容器是DOM中较大的HTML元素，并且我需要在整个区域中捕获事件。

mousemove-handler-logic必须位于子组件中，因为它封装了容器不应该知道的某些功能。

容器的渲染方法：

render() {
    return (
        <div data-component="MyContainer"
             onMouseMove={(event) => this.handleMousemove(event)}>

            <MySubComponent {// ... give some props here}>
        </div>
    );
}

我尝试了一种方法，其中MyContainer设置MySubComponent的回调函数以检索其DOM节点并向addEventListener注册处理程序，但是这种方法不能始终如一地工作，因为DOM节点有时会不确定：

export default class MyContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {};

        this.getContainerRef = this.getContainerRef.bind(this);
    }

    getContainerRef() {
        return this.refs['containerWrap'];
    }

    render() {
        return (
            <div data-component="MyContainer"
                 ref="containerWrap"
                 onMouseMove={(event) => this.handleMousemove(event)}>

                <MySubComponent getContainerRef={this.getContainerRef} />
            </div>
        );
    }
}

export default class MySubComponent extends Component {
    constructor(props) {
        // ... init something

        this.handleMousemove = this.handleMousemove.bind(this);
    } …

请考虑以下几点代码:

function Movable(x, y, width, height, background_color) {
    this.html_element = document.createElement("div");

    this.html_element.onclick = this.move;
    this.move = function() {
        alert("Clicked !");
    };

    this.display = function() {
        document.body.innerHTML += this.html_element.outerHTML;
    };
}

我正在尝试使用"move();"添加HTML属性"onclick" 作为价值.该move值实际上是一个警告"Clicked!"的函数.当最终用户点击此HTML元素时.

但它不起作用.当我检查源时,似乎该属性onclick未添加到此HTML元素.

你知道为什么以及如何解决这个问题吗？

这不是如何在回调中访问正确的`this`上下文的重复？

一些问题的答案可能是相似的,该问题是不同的.您可以从下面的评论中看到答案中有许多不同的解决方案,因为这是关于ES6而不是旧的JavaScript.这个问题也是关于事件监听器,而不是回调.这样的其他解决方案不适用于普通回调.

如果我有一个类,并且我想让某个事件调用该类中的函数,我最终必须编写一堆样板文件

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListerer('click', (...args) => {  // Can these 
      this._onClickListener(...args);              // three lines
    });                                            // be simpler?
  }
  _onClickListener() {
     console.log(this.msg);
  }
}

使用类方法作为监听器是否有一些ES6语法糖？理想情况下,我希望能够做类似的事情

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListener('click', this._onClickListener);
  }
  _onClickListener() {
     console.log(this.msg);
  }
}

无论事件如何,都要正确设置this 并传递所有参数.

但这不起作用.没有设置样板this.

class SomeClass {
  constructor(msg, elem) {
    this.msg = msg;
    elem.addEventListener('click', this._onClickListener);
  }
  _onClickListener() {
    console.log(this.msg); …