版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84454940
DOM0级事件和2级事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p id="example" onclick="console.log('Click');">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur.
</p>
<div id="p1">
<div id="p1-1">
<div id="p1-1-1">
<div id="p1-1-1-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
</p>
</div>
</div>
</div>
</div>
<script>
document.getElementById('p1').onclick = function() {
console.log('p1');
};
document.getElementById('p1-1').onclick = function() {
console.log('p1-1');
};
document.getElementById('p1-1-1').onclick = function() {
console.log('p1-1-1');
};
document.getElementById('p1-1-1-1').onclick = function(e) {
e.cancelBubble = true; //阻止冒泡
console.log('p1-1-1-1'); // dom0级后面的会覆盖前面的
};
document.getElementById('p1').addEventListener('click', function() {
console.log('p1'); //dom2级后面不会覆盖前面的时间
}, false); //冒泡不捕获(反之捕获)
</script>
</body>
</html>
jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h2>title</h2>
<div class="item">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<ul>
<li class="item1">新闻标题-1</li>
<li class="item2">新闻标题-2</li>
<li class="item3">新闻标题-3</li>
<li class="item4">新闻标题-4</li>
<li class="item5">新闻标题-5</li>
<li class="item6">新闻标题-6</li>
<li class="item7">新闻标题-7</li>
<li class="item8">新闻标题-8</li>
<li class="item9">新闻标题-9</li>
</ul>
<button id="all">全部标记为已读</button>
<div id="p1">
<div id="p1-1">
<div id="p1-1-1">
<div id="p1-1-1-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
</p>
</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
$('ul').on('click', function (event) { //添加事件
console.log('%o clicked', $(event.target)); //运用冒泡实现对子元素的监听(事件委托)
})
$('p').on('click', function (e) {
e.stopPropagation() //阻止冒泡
console.log('clicked p');
})
$('p').one('click', function(e) { //只执行一次的事件
console.log('clicked p');
});
$('p').off('click') //移除click事件
$('li').on('click', function(e, arg1, arg2) {
console.log('%o 已读', $(this));
console.log(arg1);
console.log(arg2);
return $(this);
});
$('#all').on('click', function() {
console.log($('li').trigger('click', [1, 2])); //所有匹配元素的事件
});
});
</script>
</body>
</html>