Javascript 截取文档静态节点上每个内联事件的注册_Javascript_Browser_Dom Events

Javascript 截取文档静态节点上每个内联事件的注册

javascript browser

Javascript 截取文档静态节点上每个内联事件的注册,javascript,browser,dom-events,Javascript,Browser,Dom Events,使用JavaScript，我希望在触发文档中的每个内联事件处理程序之前拦截它们的注册。对于文档的静态节点（即不是由脚本动态注入的节点），我希望删除内联事件处理程序并将其转换为外部事件处理程序（外部处理程序意味着直接从JavaScript调用节点.AddEventListener函数）。但是，对于动态节点，我希望保留内联事件处理程序的原样（动态节点是使用JavaScript注入的节点）例如： <body> <img onerror="alert(1)" /> <sc

使用JavaScript，我希望在触发文档中的每个内联事件处理程序之前拦截它们的注册。对于文档的静态节点（即不是由脚本动态注入的节点），我希望删除内联事件处理程序并将其转换为外部事件处理程序（外部处理程序意味着直接从JavaScript调用

节点.AddEventListener

函数）。但是，对于动态节点，我希望保留内联事件处理程序的原样（动态节点是使用JavaScript注入的节点）

例如：

<body>
<img onerror="alert(1)" />
<script>
document.getElementById("a").innerHTML = "<img onerror='alert(2)'/>";
</script>
<div id="a"></div>
</body>

$(document).ready(function() {
    $('#img1').unbind('error');
    //OR $('img').first().unbind('error'); 
            //to get the first image element from your actual code
});

<img src="" onerror="alert('Yahoo!');" id="target" />
<script>
    document.addEventListener('error', function(e) {
        var element = e.target;
        if (element.id == "target") {
            e.stopImmediatePropagation();
            console.log("The alert is intercepted.");
        }
    }, true);
</script>


document.getElementById（“a”）.innerHTML=“”；

在上面的示例中，我希望将警报（1）错误事件转换为外部事件，同时使警报（2）错误事件保持内联状态。我知道如何将内联事件处理程序转换为外部事件处理程序，但我不知道如何1）在内联处理程序“注册”时和实际触发之前截获它。区分静态节点和动态节点的处理程序

我知道这是一个困难的问题，但是任何帮助/注释都会很好：）

在触发或注册其他内联事件处理程序之前，您可以监视两个有用的DOM事件。你要么注意，要么注意这件事

当所有页面内容，包括所有资源（CSS、JS、图像等）时，将触发

onload

事件。另一方面，

DOMContentLoaded

在文档完成加载（DOM已准备就绪）而不是其依赖资源时触发。这意味着HTML标记、文本和样式已准备就绪

jQuery有一个用于此目的的跨浏览器事件

$(document).ready(function() {
    // do something when the DOM is ready.
});

您可以在

onerror

事件之前中断。如果您想通过javascript（和jQuery）轻松地使用元素，应该为元素分配ID或类：

。因此，假设您希望消除由

onerror

事件触发的警报；您可以这样做，例如：

<body>
<img onerror="alert(1)" />
<script>
document.getElementById("a").innerHTML = "<img onerror='alert(2)'/>";
</script>
<div id="a"></div>
</body>

$(document).ready(function() {
    $('#img1').unbind('error');
    //OR $('img').first().unbind('error'); 
            //to get the first image element from your actual code
});

<img src="" onerror="alert('Yahoo!');" id="target" />
<script>
    document.addEventListener('error', function(e) {
        var element = e.target;
        if (element.id == "target") {
            e.stopImmediatePropagation();
            console.log("The alert is intercepted.");
        }
    }, true);
</script>

这将删除

img1

元素上

error

事件的（取消绑定）处理程序。如果要从所有图像中删除错误事件处理程序，可以执行以下操作：

$('img').unbind('error');

如果要删除旧错误事件并将新错误事件分配给特定元素：

$('#img1').unbind('error').error(function(event){
    // do stuff...
});

回答你的第二个问题；您无法真正区分静态和动态添加的事件处理程序。但是，只需将代码放在添加动态处理程序的行之前即可

希望这有帮助。

我不知道如何拦截内联事件的注册，但是可以拦截内联脚本的执行
尽管浏览器不提供控制内联事件的接口，但内联事件也是遵守W3C规范的DOM事件。要理解以下实现，您最好了解HTML DOM API中的事件传播：
根据上面的文章，在所有浏览器中（除了IE），这两个事件（window.onload和domcontentloaded）都会在我的上一个例子中的onerror之后触发，这样它们就不会中断onerror事件。