JS事件

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

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

一、JS事件驱动机制简述

警察抓小偷

事件源小偷

事件偷东西

监听器警察

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

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

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

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

扫描二维码关注公众号，回复： 11006626 查看本文章

二、常见的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代码完全分离

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

南隅笙箫

发布了74 篇原创文章 · 获赞 3 · 访问量 4361

私信关注

5-JavaScript事件