文章目录
-
-
- 事件的委派
- 事件的绑定
- 事件的传播
- 拖拽
-
事件的委派
事件的委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var u1 = document.getElementById('u1')
var btn01 = document.getElementById('btn01')
btn01.onclick = function () {
var li = document.createElement('li') // 创建一个li
li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>"
u1.appendChild(li) // 将li添加到ul中
}
var allA = document.getElementsByTagName('a') // 获取所有的a
u1.onclick = function (envent) {
event = event || window.event
if (envent.target.className == 'link') {
alert('我是ul的单击响应函数')
}
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>
事件的绑定
“对象.事件 = 函数”的形式绑定响应函数，不能绑定多个，如果绑定了多个，后面的会覆盖前面的
addEventListener()：为元素绑定响应函数,多个绑定的函数按顺序执行
事件的传播
传播阶段
捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
拖拽
拖拽的流程：
当鼠标在被拖拽元素上按下时，开始拖拽：onmousedown。
当鼠标移动时被拖拽元素跟随鼠标移动：onmousemove。
当鼠标松开时，被拖拽元素固定在当前位置：onmouseup。
