在有限中求无穷,便是我们所能有的自由
元素操作
- 创建元素
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]
- 关键:
- 注意:委托是下级元素委托上级元素 没有上级委托下级