web API -- 元素操作、事件监听、事件流、事件以及事件委托知识

最新推荐文章于 2024-09-06 22:20:29 发布

布兰妮甜

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量714

点赞数 19

文章标签：前端 javascript

本文链接：https://blog.csdn.net/chaosweet/article/details/141604776

版权

在有限中求无穷，便是我们所能有的自由

文章目录

元素操作

创建元素

innerHTML (在追加多个元素时执行速度慢，性能差)

// 语法：元素.innerHTML = '内容'
<body>
	<div></div>
	<input type="button" value="点击">
	<script>
		var div = document.querySelector('div')
		var btn = document.querySelector('input')
		btn.onclick = function () {
			div.innerHTML = '<h1>星期五</h1>'
		}
	</script>
</body>

cleateElement (执行速度快，性能高)

// 语法：document.createElement
<body>
	<ul></ul>
	<input type="button" value="点击">
	<script>
		var btn = document.querySelector('input')
		var ul = document.querySelector('ul')
		btn.onclick = function () {
			ul.innerHTML = '<li>小甜甜加油</li>'
			// 创建标签
			var newLi = document.createElement('li') 
			// 往li里面设置内容
			newLi.innerHTML = '娃哈哈'
			// 追加
			ul.appendChild(newLi)
		}
	</script>
</body>

追加元素：父元素.appendChild(子元素)，元素.insertAdjacentHTML(追加的位置，‘要追加的字符串元素’)

<button>创建li</button>
<ul><li>我是li</li></ul>
<script>
	var btn = document.querySelector('button')
	var ul = document.querySelector('ul')
	btn.onclick = function() {
   // 创建一个新的li元素
   var newLi = document.createElement('li')
   // 追加到ul中
   ul.appendChild(newLi)
   // 设置元素的内容
   newLi.innerText = '我是新来的'
}
</script>

删除元素：父元素.removeChild(子元素)

<script>
  var btn = document.querySelector('input')
  var li = document.getElementById('d1')
  var ul = document.querySelector('ul')
  btn.onclick = function () {
  	li.parentNode.removeChild(li)
  }
</script>

插入元素：父节点.insertBefore(新的节点，旧的子节点)

<body>
  <ul><li>1</li></ul>
  <input type="button" value="点击">
  <script>
  	// 父节点.insertBefore(新的节点，旧的子节点)
    var btn = document.querySelector('input')
    var li = document.querySelector('li')
    var ul = document.querySelector('ul')
    btn.onclick = function () {
   		// 创建li
    	var newli = document.createElement('li')
      // 添加内容
      newli.innerHTML = '哇哈哈'
      // 插入到ul
      ul.insertBefore(newli, ul.childNodes[0])
    }
  </script>
</body>

替换元素：父节点.replaceChild(新的节点，旧的子节点)

var btn = document.querySelector('input')
var li = document.querySelector('li')
var ul = document.querySelector('ul')
btn.onclick = function () {
	// 创建li
	var newli = document.createElement('li')
	// 添加内容
	newli.innerHTML = '哇哈哈'
	ul.replaceChild(newli, li);
}

克隆元素：cloneNode(true或false)

var btn = document.querySelector('input')
var div = document.querySelector('div')
btn.onclick = function () {
	var newDiv = div.cloneNode(true)
	document.body.appendChild(newDiv)
}

注意：textarea虽然是双标签,但是依旧按照表单的获取方法,用value去获取

事件监听

注册：事件源.addEventListener('事件类型',事件处理程序,是否捕获)
- 事件源：操作的元素
- 事件类型：在此不加on，onclick，click
- 时间处理程序：函数
- 是否捕获：可选参数，默认为false (true：捕获 false：冒泡)
```
var btn = document.querySelector('button')
// 事件监听注册事件
btn.addEventListener('click',function(){
   console.log(1)
})
第一种：元素.onclick = function () {}
第二种：元素.addEventListener('click',function () {})
```

移除事件：元素.removeEventListener('事件类型',事件处理程序名称)

var btn = document.querySelector('button')
// 事件监听注册事件
var fn1 = function() {
	console.log(1)
}
var fn2 = function() {
	console.log(2)
}
btn.addEventListener('click',fn1)
btn.addEventListener('click',fn2)
// 事件移除事件
btn.removeEventListener('click',fn2)
btn.removeEventListener('click',fn1)

注意：若将来要通过事件监听的方式移除事件时，之前注册事件要把事件处理程序单独抽取出来命名

事件流

概念：事件触发后的三个阶段**(捕获阶段，目标阶段，冒泡阶段)**
- 注意：在事件触发后，这三个阶段始终是存在的，顺序：1先捕获, 2到达目标, 3再冒泡. 但是再触发后，针对捕获和冒泡，仅仅启用一个
事件冒泡
- 当事件发生后，事件会从目标元素开始一直冒泡到ducument
- 最先触发目标阶段
事件捕获：document到目标阶段，反冒泡
事件对象
- 在事件触发后，在事件处理程序中(函数体)，所获取并操作的对象
- 事件发生时的相关对象[event,ev,e]
- 获取事件对象：事件源.事件类型 = function(e) { // 第一个形参e就是事件对象}
```
var div = document.querySelector('div')
var btn = document.querySelector('input')
div.onclick = function (e) {
  console.log(e)
}
btn.onclick = function (ev) {
  console.log(ev)
}
```
- 鼠标事件对象相关属性
  - 事件对象.clientX / 事件对象.clientY：参照是浏览器
  - 事件对象.pageX / 事件对象.pageY：参照是文档
  - 事件对象.offsetX / 事件对象.offsetY：参照是当前的元素

事件

键盘事件
- 事件类型
  - 键盘按下事件：onkeydown
  - 键盘抬起事件：onkeyup
- 事件对象相关属性
  - 获取键盘按键对应的键码值：事件对象.keyCode
  - 表示alt键是否按下，,返回布尔值：事件对象.altKey
  - 表示shift键是否按下，返回布尔值：事件对象.shiftKey
  - 表示ctrl键是否按下,返回布尔值 (true按下,false没有按下)：事件对象.ctrlKey
鼠标事件
- 输入事件：oninput
- 鼠标按下：onmousedown
- 鼠标抬起：onmouseup
- 鼠标移动：onmousemove
- 支持事件冒泡,同时子元素依旧可以触发事件：onmousover
- 不支持事件冒泡,子元素不会触发事件：onmouseenter
事件对象公共属性和方法
- 获取最先触发的函数：事件对象.target
- 和this的区别
  - this在事件处理程序中始终代表的是事件源
  - e.target代表不一定是事件源，代表的是最先触发的元素[目标阶段—>document]
- 方法
  - 阻止默认行为：事件对象.preventDefault()
  - 停止冒泡传播：事件对象.stopPropagation()

判断事件冒泡

<script>
  var div = document.querySelector('div')
	div.onmouseenter = function (e) {
    console.log(e.bubbles)
  }
</script>

事件委托

介绍：把子孙元素的注册事件,完全交给子孙元素的上级元素代理
实现
- 给子孙元素的上级注册事件
- 在事件处理程序中,通过事件对象.target获取最先触发的函数
- 可以通过事件对象.target的nodeName属性检测最先触发的是否是指定元素
作用
- 减少事件的绑定，节省内存
- 上级元素可以代理未来新动态添加的元素
原理
- 关键：事件对象.target可以获取最先触发的元素
- 原理：因为事件冒泡的存在，我们才可以获取到最先触发的元素 [目标→document]
注意：委托是下级元素委托上级元素没有上级委托下级