5-JavaScript事件

最新推荐文章于 2023-05-30 20:58:21 发布

南隅笙箫

最新推荐文章于 2023-05-30 20:58:21 发布

阅读量178

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40672635/article/details/105379753

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS事件

通常鼠标或热键的动作我们称之为事件（Event）

通过 JS 事件，我们可以完成页面的指定特效。

一、JS事件驱动机制简述

警察抓小偷

事件源小偷

事件偷东西

监听器警察

注册/绑定监听器警察盯着小偷

事件源：专门产生事件的组件。

事件：由事件源所产生的动作或者事情。

监听器：专门处理事件源所产生的事件。

二、常见的JS事件

1、点击事件（onclock)

由鼠标或热键点击元素组件时触发

<script>
    function run1(){
        alert("弹出")
    }
</script>
<body>
    <input type="text" value = "点击“ οnclick="run1()"/>
</body>

2、焦点事件

a、获取焦点事件（onfocus）

焦点：整个页面的注意力

默认一个正常页面最多一个焦点

例如：文本框中闪烁的小竖线

获取焦点事件：当元素组件获取焦点时触发

<script>
    function run1(){
        alert("获取焦点了")
    }
</script>
<body>
    <input type="text" onfocus="run1()"/>
</body>

b、失去焦点事件（nobler)

失去焦点时触发

<script>
    function run1(){
        alert("失去焦点了")
    }
</script>
<body>
    <input type="text" onblur="run1()"/>
</body>

3、域内容改变事件（onchange)

元素组件的值发生改变时触发

<select onchange="run1()">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="gz">广州</option>
</select>

4、加载完毕事件（onload）

元素组件加载完毕时触发

<body onload="run1()">
    
</body>

5、表单提交事件（on submit）

表单的提交按钮被点击时触发

用于表单的校验——控制表单的提交

true 允许表单提交

false 阻止表单提交


<script>
	function run1(){
        ....;
        return true;
    }
</script>
<form onsubmit="return run1()">		
    <input type="text" name="uname" /></form><br />
    
    <input type="submit" value="提交" />
</form>

6、键位弹起事件（onkeyup）

在组件中输入某些内容时，键盘键位弹起时触发该事件

<input type="text" onkeyup="run1()"/>

7、常用鼠标事件

a、鼠标移入事件（onmouseover）

鼠标移入事件：鼠标移入某个元素组件时触发

<input type="text" onmouseover="run1()"/>

b、鼠标移出事件（onmouseout）

鼠标移出事件：鼠标移出某个元素组件时触发

<input type="text" onmouseout="run1()"/>

三、JS事件的两种绑定方式

1、元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数

<input type="text" onmouseout="run1()"/>
//传这个文本框对象
<input type="text" onmouseout="run1(this)"/>
//绑定多个事件,绑定顺序就是执行顺序
<input type="text" onmouseout="run1(),run2(),run3()"/>

优点：

开发快捷

传参方便

可以绑定多个函数

缺点：

JS和HTML高度糅合在一起，不利于多部门的项目开发维护

2、DOM绑定方式

使用DOM属性方式绑定属性

<script>
	window.onload=run1;		//一次绑定一个函数，不能传参
    window.onload=function(){	//匿名函数，可以绑定多个参数，可以传递参数
        run1();
        run2();
        run3();
    };
</script>

<script>
	function run1(){
        
    }
    function run2(){
        
    }
    window.onload=function(){
        //使用DOM方式获取到元素对象
        var t1 = document.getElementById("t1");
        //改变这个元素的属性
        ti.onclick=function(){
            run1();
            run2();
        }
    }
</script>

<input type="text" id="t1"/>

优点：

HTML和JS代码完全分离

利用匿名函数可以解决缺点

南隅笙箫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5-JavaScript事件

JS事件通常鼠标或热键的动作我们称之为事件（Event）通过 JS 事件，我们可以完成页面的指定特效。一、JS事件驱动机制简述警察抓小偷事件源小偷事件偷东西监听器警察注册/绑定监听器警察盯着小偷事件源：专门产生事件的组件。事件：由事件源所产生的动作或者事情。监听器：专门处理事件源所产生的事件。注册/绑定监听器:让监听器时刻监听事件源是否有指定事件产生,如果事...
复制链接

扫一扫