0

当 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>
4

2 回答 2

1

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

更改事件仅在其表单字段时触发

例如input textarea和select

所以当 div 的内容发生变化时不会触发 change 事件。

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

另一个选项是在您更改变量值的地方手动触发事件

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

以下 SO 问题有答案，但需要 jQuery
使用 jQuery 检测元素内容更改

于 2012-06-29T21:24:27.243 回答
1

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

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

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 网站的插件用户指南中了解更多关于插件的信息。

于 2012-07-05T15:43:14.627 回答