html 元素关于事件绑定一些结论

最新推荐文章于 2024-01-05 19:54:54 发布

keepFreedom

最新推荐文章于 2024-01-05 19:54:54 发布

阅读量351

点赞数

分类专栏：知识点整理

本文链接：https://blog.csdn.net/keepFreedom/article/details/79725134

版权

知识点整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实验了三种形式绑定事件的方法-以绑定click事件为例子。
一个使用jQuery的方式，一个使用js原生，一个直接在html元素利用onclick属性绑定。
实践的结论：

当jQuery方式绑定的事件，执行顺序在直接在html上绑定的优先级低。
当jQuery方式绑定的事件与 js原生方式绑定的事件的优先级判定在于哪一个
先绑定，如果jQuery先进行绑定，则会执行完jQuery方式绑定的所有方式。再执行js绑定的方法。
使用js绑定的方法会覆盖html元素绑定的方法，而jQuery不会覆盖html方式绑定的onclick的方法。

为什么js能够覆盖 html方式绑定的onclick方法，而jQuery没有？
因为js改变了html 的 onclick 属性。
jQuery绑定事件的方式没有利用onclick的属性。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("but").onclick=function (){alert(99999);};
$("button").click(function(){
alert(111);
});

$("button").click(function(){
alert(2);
alert(document.getElementById("but").onclick);
});
$("button").click(function(){
alert(3);
});
$("button").click(function(){
alert(4);
});
$("div").click(function(){
alert(5555);
});

});
function change(){
alert(33333);
}
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>
<button id="but" type="button" onclick="change()">Click me</button>
</div>
</body>
</html>

keepFreedom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 元素关于事件绑定一些结论

实验了三种形式绑定事件的方法-以绑定click事件为例子。一个使用jQuery的方式，一个使用js原生，一个直接在html元素利用onclick属性绑定。实践的结论：当jQuery方式绑定的事件，执行顺序在直接在html上绑定的优先级低。当jQuery方式绑定的事件与 js原生方式绑定的事件的优先级判定在于哪一个先绑定，如果jQuery先进行绑定，则会执行完jQuery...
复制链接

扫一扫