JavaScript基础总结 (5)

目标元素是指具体发生了事件的元素,不能再细分了

事件回调函数中this的指向 this 指向绑定事件的元素 常用事件列表 鼠标事件 click 单击 dblclick 双击 contextmenu 右击 mousedown 鼠标按下 mouseup 鼠标按键抬起 mousemove 鼠标移动 mouseover 鼠标悬停 mouseout 鼠标离开 mouseenter 代替mouseover mouseleave 代替mouseout 键盘事件 keydown 键盘按下 keyup 键盘弹起 keypress 键盘按下,控制键无法触发

keydown和keyup任何一个按键都可以触发,但是不分大小写

keypress功能键无法触发,可以区分大小写

文档事件 load 文档中所有一切加载完毕 unload 文档关闭 beforeunload 文档关闭之前 DOMContentLoaded 文档加载完毕,用来替换load事件;页面中所有的元素加载完毕就触发,推荐使用 关闭前弹窗固定用法: window.onbeforeunload=function(){ return \'你确定要关闭吗?\'; }

文档事件通常绑定给window

load事件和DOMContentLoaded事件的区别:

① load事件用三种方法都可以绑定,DOMContentLoaded事件只能用addEventListener绑定

②load事件是等页面所有的一切包括内容图片加载完毕再触发,DOMContentLoaded只要页面元素加载完毕就触发

表单事件 submit 表单提交时,绑定给form元素
reset 表单重置时,绑定给form元素
blur 失去焦点,绑定给表单控件
focus 获取焦点,绑定给表单控件元素
select 文本被选中,绑定给可输入元素
change 对于可输入元素,内容改变且失去焦点的时候才会触发;对于复选框、单选按钮、下拉选项,修改就会触发
图片事件 load 图片文件加载完毕
error 图片加载错误
abort 图片加载中断(了解)
其他事件 resize   视口发生变化的时候触发,绑定给window
scroll 元素中的内容滚动的时候触发,监听整个页面内容滚动绑定给window

获取页面内容滚动了多少:

document.documentElement.scrollTop||doucment.body.scrollTop

Event对象 获取Event对象 事件回调函数自动获取形参,可以得到Event事件 鼠标事件对象 MouseEvent clientX /clientY 获取鼠标在视口上的位置
pageX /pageY 获取鼠标在页面(根元素)上的位置
screenX / screenY 获取鼠标在屏幕上的位置
offsetX / offsetY 获取鼠标在目标元素上的位置
button 获取鼠标按键:0:左键,1:滚轮键,2:右键
键盘事件对象 keyCode 获取按键的ASCII码值
which 同keyCode
key 获取按键的值,字符串;
所有的事件对象都有的属性 type 获取事件的类型(事件的名字)
timestamp 获取触发事件的时刻与打开页面的时刻相距毫秒数
target 获取目标元素
stopPropagation() 阻止冒泡
preventDefault() 阻止浏览器默认行为
浏览器默认行为 ①浏览器有哪些默认行为 所有元素右击默认弹出系统菜单
超链接点击会默认跳转
提交按钮和重置按钮点击默认触发表单的提交和重置
表单与元素默认有提交行为和重置行为
②阻止浏览器默认行为 在事件回调函数内:
event.preventDefault();或者return false
事件委托

事件委托:把某个元素的事件委托到其他元素上,通常是祖先元素

实现方式:把事件添加到祖先元素上,触发事件的时候判断目标元素是否是我们要监听事件的元素,如果是就执行相关操作,否则什么都不干

//如果目标元素是li, 执行相关操作
if(event.target.nodeName.toUpperCase()===\'LI\'){
//切换active类名
   event.target.classList.toggle(\'active\');
}

事件委托的优势:

① 减少内存消耗;如果需要给很多元素添加某个事件,可以委托到他们共同的祖先元素上。

②让动态添加的元素也有事件。

HTMLCollection和NodeList的区别

HTMLCollection是所有元素的集合;NodeList是所有节点的集合

HTMLCollection对象没有forEach方法,NodeList有forEach方法

HTMLCollection是动态的,获取了集合之后再在页面中添加元素,集合会发生动态变化,NodeList是静态的,获取之后就不在改变了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwwxd.html