1在test.html页面,使用function创建一个myfun函数,代码如下:
2、在myfun函数内,使用alert()方法弹出“myfun函数执行了”的文字提示,代码如下。
3、在test.html中的body标签后面,使用onload在页面打开时就加载执行myfun()函数。
4、onload事件不仅可以放在body标签内,也可以直接在js标签内使用,代码如下。
5、在浏览器中打开test.html页面,结果如下。
1、如图首先在一个文件夹下创建index.html文件。
2、然后用可编辑文本文件的软件打开index.html文件,index.html的初始内容如图。
3、js的鼠标事件主要有onclick:单击事件ondbclick:双击事件onmouseover:鼠标移入事件onmouseout:鼠标移出事件onmousedown:鼠标按下事件onmouseup:鼠标松开事件。首先实现鼠标左键单击和双击的js代码如图。
4、编辑完index.html文件后,用浏览器打开index.html文件,效果如图。当鼠标左键单击span时显示"触发鼠标单击事件",双击span时显示"触发鼠标双击事件"。
5、接着实现鼠标的移入和移出事件。如图修改index.html文件。
6、最后实现鼠标的点下和松起事件。如图修改index.html文件。
7、修改完index.html文件后,用浏览器打开index.html文件,效果如图。
首先,事件对象 event 是一个对象,包含着跟事件有关的所有信息,包括触发事件的 dom 以及 每种事件的一些特征。当dom操作触发某个事件时,会产生事件对象 event, 当事件被触发时产生,事件执行完毕时销毁。
获取鼠标在那个标签上 e.target
2.1. 事件捕获: 当时事件被触发的时候,系统会从 window 开始 依次向下遍历,遍历的过程中,遇到没有触发的相同事件便触发。
(window =>document =>html =>body =>祖先元素 =>父元素 =>目标元素)
2.2 事件触发: 直到找到触发这个事件的元素,触发元素绑定的事件方法
2.3 事件冒泡: 触发目标事件之后,然后会一层一层向上遍历,遍历的过程中,遇到没有触发的相同事件便触发。
直到返回 window 结束 这整个过程叫做事件流。
事件捕获 和 事件冒泡 同一事件流 只能有一个生效,JS中默认执行事件冒泡 (false)。
3.1 Dom 0级
写法: ele.on事件名 = function(){}
特点: js 与 html 完全分离 便于封装
缺点:同一个DOM对象 同时间只能绑定一个 同事件
也就是说 一个 dom对象 只能执行一个事件处理函数
如果给 这个事件 绑定了多个事件处理函数, 则执行最后一个事件处理函数
3.2 Dom 2级(事件监听)
写法:
ele.addEventListener("事件类型",事件处理函数,bool)
事件处理函数可以是: 匿名函数、 命名函数、 对象
bool: 布尔值 (只有true 和 false) 不写默认为 false
true: 触发 事件捕获 false:触发事件冒泡
特点:
1.DOM 2级不会与DOM 0级事件冲突 同时存在时两个都执行
2.可以绑定多个事件函数 不会起冲突
Dom2级 可以删除命名函数 事件移除 removeEventListener
注意: 事件名中没有 on, on是DOM0级的写法
4.1 鼠标事件
1. 单机事件 click
2. 双击事件 dblclick
3. 右键事件 contextmenu 默认事件:右击打开默认菜单栏
4. 移入事件 mouseenter
5. 移出事件 mouseoutmouseover
6. 移动事件 mouseenter mouseleave
7. 按下事件 mousedown
8. 释放事件 mouseup
9. 滚轮事件 mousewheel e.wheelDelta>0 向上滑 <0 向下滑
4.2 键盘事件
1. 键盘按下事件 只要按下就一直触发 keydown 获取键码: e.keyCode
2. 键盘抬起事件keyup
4.3 UI事件(窗口事件)
1. 资源加载完毕 load
2. 窗口大小发生改变 resize
3. 窗口滚动条 scroll
4. 资源加载完毕 error
4.4 表单事件
1. 获取焦点focus
2. 失去焦点blur
3. 正在输入input
4. 内容发生改变 change
1.获取鼠标坐标:
1. 在浏览器的可视窗口的坐标 --- e.clientX / e.clientY
2. 在标签内的坐标 ----- e.offsetX / e.offsetY
3. 在屏幕内的坐标 ----- e.screenX / e. screenY
4. 在文档中内的坐标 -- e.pageX / e.pageY
2. 阻止默认事件: