js 有什么页面加载之后的事件

JavaScript019

js 有什么页面加载之后的事件,第1张

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. 阻止默认事件: