JavaScript事件

最新推荐文章于 2024-07-12 09:36:48 发布

Shannon404

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量94

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/SUGA_/article/details/117549269

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

传送门

1、事件定义及驱动机制
2、常用事件
3、事件两种绑定方式

1、事件定义及驱动机制

1.1 定义：用户使用鼠标或热键使得页面特效改变

1.2 驱动机制：

事件源：产生事件的组件
事件：由事件源发生的动作
监听器：处理事件
注册或绑定监听器：时刻监听时间是否发生，发生则调用监听器处理

2、常用事件

2.1 点击事件

<head>
 <script>
 	   function run1(){
       alert("点击");
      }
  </script>
  </head> 
  <body>
  <input type="button" value="点哦" onclick="run1()"   >
  </body>

点击按钮后弹出对话框

2.2 焦点事件

 代码1：
 <head>
 <script>
 	   function run1(){
       alert("获取焦点");
      }
  </script>  
  </head> 
  <body>
  <input type="text" onfoucs="run1()"   >
  </body>

点击文本框获取焦点后，弹出对话框

————————————————————————————————————————

代码2：
<head>
 <script>
 	   function run1(){
       alert("失去焦点");
      }
  </script>  
  </head> 
  <body>
  <input type="text" onblur="run1()"   >
  </body>

点击文本框外失去焦点后，弹出对话框

2.3 域改变事件

<head>
 <script>
 	   function run1(){
       alert("内容改变");
      }
  </script>  
  </head> 
  <body>
  <select onchange="run1()">
  <option value="LL">吕梁</option>
  <option value="YC">榆次</option>
  <option value="TY">太原</option>
  </select>
  </body>

切换下拉选项框值后，弹出对话框

2.4 加载完毕事件

<head>
 <script>
 	   function run1(){
       alert("加载完毕");
      }
  </script>  
  </head> 
  <body onload="run1()">
  欢迎来到我的世界！
  </body>

body内容加载完毕后，弹出对话框

2.5 表单提交事件

 代码1：
 <head>
 <script>
 	   function run1(){
       alert("表单提交按钮被点击");
      }
  </script>  
  </head> 
  <body>
  <form onsubmit="run1()">
  	<input type="text" name="uname"/><br/>
  	<input type="submit" value="提交"/>
  </form>	
  </body>

——————————————————————————————————————————————————

代码2：
 <head>
 <script>
 	   function run1(){
       alert("表单提交按钮被点击");
       return true;
      }
  </script>  
  </head> 
  <body>
  <form onsubmit="return run1()">
  	<input type="text" name="uname"/><br/>
  	<input type="submit" value="提交"/>
  </form>	
  </body>

表单提交按钮被点击后，弹出对话框，根据调用函数的布尔值来确定表单数据是否提交，可用于表单校验
注意：此事件需要返回（return）布尔值执行“提交/阻止”表单数据
Ⅰ、true则提交
Ⅱ、false则阻止提交

2.6 键位弹起事件

<head>
 <script>
 	   function run1(){
       alert("键位弹起");
      }
  </script>  
  </head> 
  <body>
  <input type="text" onkeyup="run1()"   >
  </body>

在文本框内输入内容，键位弹起后，弹出对话框

2.7 常用鼠标事件

代码1：
<head>
 <script>
 	   function run1(){
       alert("鼠标移入");
      }
  </script>  
  </head> 
  <body>
  <input type="text" onmouseover="run1()"   >
  </body>

鼠标移入文本框后，弹出对话框

代码2：
<head>
 <script>
 	   function run1(){
       alert("鼠标移出");
      }
  </script>  
  </head> 
  <body>
  <input type="text" onmouseout="run1()"   >
  </body>

鼠标移出文本框后，弹出对话框

3、事件两种绑定方式

3.1 元素句柄绑定

把事件以标签属性方式写在标签内再绑定函数（开发、传参、绑多个函数方便）

<head>
 <script>
 	   function run1(){
       alert("run1");
      }
       function run2(str){
       alert(str);
      }
      function run3(obj){
       alert(obj.value);<!--元素对象.value,对话框内容“value值”-->
      }
  </script>
  </head> 
  <body>
  <input type="text" value="007" onclick="run1()"   ><!--绑定无参函数-->
  <input type="text" value="000" onclick="run2('你好啊')"   ><!--绑定有参函数-->
  <input type="text" value="000" onclick="run3(this)"   ><!--绑定有参函数（元素对象）当前对象则用“this”-->
  <input type="text" value="001" onclick="run1(),run2('你好啊'),run3()this"   ><!--绑定多个函数-->
  
  </body>

绑定无参函数，点击“007”后则弹出“run1”对话框
绑定有参函数，点击“000”后则弹出“你好啊”对话框
绑定有参函数（元素对象），点击“000”后则弹出“000”对话框
绑定多个函数（无参，有参，元素对象），点击“001”后则依次弹出以上三个对话框

3.2 DOM绑定（使HTML与JS代码完全分离）

<head>
 <script>
 	   function run1(){
       alert("加载完毕");
      }
      window.onload=run1;//对象.事件属性为①DOM绑定，只能执行一个函数且没有参数
      window.onload=function(){
      函数1;
      函数2;
      ...};//匿名函数为②DOM绑定，能绑定多个函数
  </script>  
  </head> 
  <body>
  欢迎来到我的世界！
  </body>

小练习：

使用DOM绑定方式给文本框设置onclick事件并绑定run1、run2函数

<head>
 <script>
 	   function run1(){
       alert("run1");
      }
       function run2(){
       alert("run2");
      }
      //页面加载完毕后调用文本框ID并将其封装至t1
      window.onload=function(){
      var t1=document.getElementByid("t1");
      t1.onclick=function(){//使用②DOM绑定两函数
      run1();
      run2();
      };
  </script>
  </head> 
  <body>
  <input type="text" id="t1" >
  </body>

Shannon404

关注

1
点赞
踩
0

收藏

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

传送门1、事件定义及驱动机制2、常用事件3、事件两种绑定方式1、事件定义及驱动机制1.1 定义：用户使用鼠标或热键使得页面特效改变1.2 驱动机制：事件源：产生事件的组件事件：由事件源发生的动作监听器：处理事件注册或绑定监听器：时刻监听时间是否发生，发生则调用监听器处理2、常用事件2.1 点击事件<head> <script> function run1(){ alert("点击"); } </script&gt
复制链接

扫一扫