Question

我希望在div的值发生变化时看到警告消息。 modify_div正在修改此值。当我单击该按钮时，此功能会修改div，但不会显示警告“值已更改”。我错过了什么吗？

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          "      http://www.w3.org/TR/html4/strict.dtd">

  <html>
  <head>
  <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
   <script>


 YUI().use('node', function (Y) {

 var demo = Y.one('#test');
 demo.on('click', function (e) {
    //alert('You clicked me');
});
});

 YUI().use('node','event', function (Y) {

var demo = Y.one('#variable-name');
demo.on('change', function (e) {
    alert('Value changed');
});
});



</script>

<script type="text/javascript">

function modify_div()
{
//var thevar = "This is a test";
var thevar = 7;


document.getElementById('variable-name').innerHTML = thevar;
}
</script>

</head>


<body>


<!-- Click me button -->
<input type="button" id="test" value="Click me" enabled="true" onclick="modify_div();">        </input>


</br>


<div id="variable-name" style="display:inline;">01010101</div>



</body>

</html>

Answer 1

基于http://www.quirksmode.org/dom/events/change.html，

更改事件仅在其表单字段

时触发

e.g。 input textarea和select

因此当div的内容发生变化时，不会触发更改事件。

如果用输入替换div并更新其值，它将起作用。

其他选项是在您更改变量值的地方手动触发事件

http://tech.groups.yahoo.com/group/ydn-javascript/message/13216

以下SO问题有答案，但它需要jQuery
Detect element content changes with jQuery

Answer 2

@ N30给出了正确答案：div没有变化事件。他提供了很好的选择但没有YUI特定的信息，所以我想用一个YUI插件的例子来扩展他的答案。

就像他解释的那样，基本的想法是在JavaScript内存中保留一个值，并在更改该值时触发事件。您可以通过扩展为您提供自定义事件的Y.EventTarget来实现此目的：

YUI().use('node', 'plugin', function (Y) {
    function NodeValuePlugin(config) {
        // Boilerplate
        NodeValuePlugin.superclass.constructor.apply(this);

        // config.host is the Y.Node instance
        this._node = config.host;
        // we keep the value in a private property
        this._value = this._node.get('text');

        // we publish a 'change' event and set a default
        // function to run when the event is fired
        // This function will change the private property
        // and update the DOM
        // This means you can call e.preventDefault() and
        // stop the default behavior (the change of value)
        this.publish('change', {
            emitFacade: true,
            defaultFn: this._defValueChangeFn
        });
    }
    Y.extend(NodeValuePlugin, Y.EventTarget, {
        set: function (newVal) {
            // we want to do stuff only when the value changes
            if (newVal != this._value) {
                // instead of changing the DOM here,
                // we fire an event and let the event
                // do the work
                // We pass it the new and old values
                this.fire('change', {
                    newVal: newVal,
                    prevVal: this._value
                });
            }
            // make this method chainable
            return this;
        },
        get: function () {
            return this._value;
        },
        _defValueChangeFn: function (e) {
            // sync everything
            this._value = e.newVal;
            this._node.set('text', e.newVal);
        },
        // this is necessary boilerplate for plugins
        destroy: function () {}
    }, {
        // we can access the plugin from node[namespace]
        // in this case, node.value
        NS: 'value'
    });

    var node = Y.one('#test').plug(NodeValuePlugin);
    node.value.on('change', function (e) {
        console.log('Here\'s the old value: ' + e.prevVal);
        console.log('Here\'s the new value: ' + e.newVal);
    });
    // Freebie:
    // since we're using node.set('text', foo)
    // this prevents XSS vulnerabilities
    node.value.set('<a href="#">qwer</a>');

});

您可以从YUI网站的Plugin User Guide了解有关插件的更多信息。

YUI修改和检测<div> </div>的变化

2 个答案: