JavaScript 事件

最新推荐文章于 2023-10-07 17:11:09 发布

时小浅

最新推荐文章于 2023-10-07 17:11:09 发布

阅读量146

点赞数

分类专栏：重学前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_36194388/article/details/119170722

版权

重学前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

什么是事件与事件处理函数

事件：是用户与计算机交互的方法。比如：单击、鼠标放上、双击等，当然有的事件是由对象发出,比如onload事件；

事件处理函数：就是JS中，当事件发生时，去调用函数。在事件前加“on”，比如：onclick、ondblclick(双击事件)、onchange(改变事件)

事件例子：

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时 onload（文档加载完毕）

当网页被卸载时 onbeforeunload（文档即将从浏览器中卸载）

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户触发按键时

常用事件

鼠标事件
onclick	点击事件	点击鼠标左键触发
ondblclick	双击事件	双击鼠标左键触发
onmouseover	移入事件	鼠标指针移到一个元素上触发
onmouseout	移出事件	鼠标指针移出一个元素上触发
onmousemove	移动事件	鼠标在一个元素上移动持续触发
onmousedown	鼠标按下	单击鼠标任何一个按键触发
onmouseup	鼠标抬起	松开鼠标任何一个按键触发
键盘事件
onkeydown	键按下	用户按下一个键盘按键时触发
onkeyup	键弹起	用户在键盘按键被松开时触发
onkeypress	按键一次	事件会在键盘按键被按下并释放一个键时发生
表单事件
onsubmit	表单提交
onreset	表单重置
onblur	元素失去焦点
onfocus	元素获取焦点
onchange	用户改变域的内容
窗口事件：两种书写方式
第一种	<body onload = “函数名()”>
第二种	window.onload = 函数名;	注意，这里没有引号和小括号
onload: 网页一打开时发生——准确点说，是网页加载完毕时发生

鼠标事件

  <div id="box" onmouseover="a()" onmouseout="b()"></div>     
        <script type="text/javascript">
            
            //需求： 鼠标移入div框改变div框的背景颜色           
                //>>1. 制作静态效果           
                //>>2. 定义函数
                function a(){
                    //>>3. 获取div
                        var box = document.getElementById("box");
                    //>>4. 改变背景颜色
                        box.style.backgroundColor = "blue";
                }           
            //需求： 鼠标移出div，改变div背景颜色
                //>>2. 定义函数
                function b(){
                    //>>3. 获取div
                        var box = document.getElementById("box");
                    //>>4. 改变背景颜色
                        box.style.backgroundColor = "red";
                }   
        </script>

事件处理函数返回值

某些事件发生时，浏览器会自动执行默认的动作。而事件句柄的返回值会影响浏览器默认动作的执行。如果事件句柄不返回值，或者返回true，默认动作被执行；如果事件句柄返回false，则默认动作不发生。

例如：当单击删除链接时

 /*
	需求:点击删除按钮，弹出一个提示框，
	如果点击是确定按钮，执行浏览器默认行为： 否则： 阻止浏览器默认行为
	*/
      <a href="http://www.baidu.com" onclick="return a()">删除1</a>
                //1. 定义函数
                    function a(){
                        //弹出提示框
                        var result = confirm("是否删除数据");
                        //判断result，阻止浏览器默认行为
                        if(!result){
                            return false;
                        }
                    }

时小浅

关注

0
点赞
踩
0

收藏

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

什么是事件与事件处理函数事件：是用户与计算机交互的方法。比如：单击、鼠标放上、双击等，当然有的事件是由对象发出,比如onload事件；事件处理函数：就是JS中，当事件发生时，去调用函数。在事件前加“on”，比如：onclick、ondblclick(双击事件)、onchange(改变事件)事件例子：HTML 事件的例子：当用户点击鼠标时当网页已加载时 onload（文档加载完毕）当网页被卸载时 onbeforeunload（文档即将从浏览器中卸载）当图片已加载时当鼠标移动
复制链接

扫一扫