JavasScript 的对象事件的处理程序

时间:2024-11-07 11:46:10

1、鼠标事件

常用的鼠标事件有MouseDown、MouseUp、MouseMove、MouseOver、MouseOut、Click、Blur及Focus等事件。

mousedown:按下鼠标键时触发

 mouseup:抬起鼠标键时触发

 click:单击鼠标时触发

 dblclick:在同一个元素上双击鼠标时触发

 mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件

 mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件

 wheel:在浏览器窗口滚动鼠标滚轮时触发

代码:

 // 为某个节点添加事件监听器
        box = document.getElementById("b1");


        box.addEventListener( "mousedown",  
            function(){
                console.log("你的鼠标按下了!");
            } 
        );

        box.addEventListener( "mouseup",  
            function(){
                console.log("你的鼠标抬起了!");
            } 
        );

        box.addEventListener( "click",  
            function(){
                console.log("你的鼠标单击了!");
            } 
        );

        box.addEventListener( "dblclick",  
            function(){
                console.log("你的鼠标双击了!");
            } 
        );

        box.addEventListener( "mouseenter",  
            function(){
                console.log("你的鼠标进入目标元素了!");
            } 
        );

        box.addEventListener( "mouseleave",  
            function(){
                console.log("你的鼠标离开目标元素了!");
            } 
        );

        // 为浏览器窗口对象添加事件监听器:以滚动监听为例

        window.addEventListener( "wheel",  
            function(){
                console.log("你的鼠标滚轮正在滚动...");
            } 
        );


        box.addEventListener( "mousedown",
            function(){
                console.log("鼠标按下事件已触发");
            }
        );

        box.addEventListener( "mouseup",
            function(){
                console.log("鼠标抬起事件已触发");
            }
        );

        box.addEventListener( "click",
            function(){
                console.log("鼠标单击事件已触发");
            }
        );


        box.addEventListener( "dblclick",
            function(){
                console.log("鼠标双击事件已触发");
            }
        );
        
        box.addEventListener( "mouseenter",
            function(){
                console.log("鼠标进入节点事件已触发");
            }
        );

        box.addEventListener( "mouseleave",
            function(){
                console.log("鼠标离开节点事件已触发");
            }
        );



        // 窗口监听鼠标滚动
        window.addEventListener( "wheel",
            function(){
                console.log("鼠标滚动事件已触发");
            }
        );

结果:

2、键盘事件

常用的键盘事件有KeyDown、KeyPress、KeyUp、Select 和Change事件。

1.KeyDown事件

在键盘上按下一个键时,发生KeyDown事件。在这个事件发生后,由JavaScript自动调用 onKeyDown 句柄。该句柄适用于测览器对象document、图像、超链接及文本区域。

2.KeyPress事件

在键盘上按下一个键后且字符被显示出来之前发生KeyPress事件。在这个事件发生后,由JavaScript 自动调用onKeyPress 句柄。该甸柄适用于浏览器对象document、图像、超链接及文本区域。KeyDown事件总是发生在KeyPress事件之前。如果这个事件处理函数返回false值,就不会产生KeyPress事件。

3.KeyUp事件

在键盘上按下一个键,再释放这个键的时候发生KeyUp事件。在这个事件发生后由JavaScript 自动调用onKeyUp句柄。该句柄适用于浏览器对象document、图像、超链接及文本区域。

一个典型的按键会产生所有这3种事件,依次是KeyDown、KeyPress、按键释放时的KeyUp。KeyDown 触发后,不一定触发KeyUp。当KeyDown 按下并拖动鼠标,那么将不会触发KeyUp事件。

4.Select事件

选定文本输入框或文本输入区域的一段文本后,发生Select事件。在Select事件发生后,由JavaScript 自动调用onSelect 句柄。onSelect句柄适用于文本输入框以及文本输入区。

5)Change 事件

一个选择框、文本输入框或者文本输入区域失去焦点,其中的值又发生改变时,就会发生Change事件。在Change事件发生时,由 JavaScript 自动调用onChange句柄。Change事件是一个非常有用的事件,它的典型应用是验证一个输入的数据。
 

代码:

 <title>键盘事件</title>
    <style>
        #output {  
            margin-top: 20px;  
            padding: 10px;  
            border: 1px solid #ccc;  
            width: 300px;  
            height: 100px;  

            /*  超出这个盒子的内容,以纵向滚动的方式展示 */
            overflow-y: scroll;
            
            /* 保持空白符和换行符 */ 
            white-space: pre-wrap; 
        }  
    </style>  
</head>  
<body>  

    <div id="output"></div>  
  
    <script>  

        // keydown:按下键盘时触发
        // keyup:抬起键盘时触发

        // 获取显示按键信息的div节点
        const outputDiv = document.getElementById('output');  
  
        document.addEventListener( "keydown",
            function(event){
                console.log(`有键盘被按下: ${event.key}`);
            }
        )


        // 监听整个文档的keydown事件  
        document.addEventListener(

            'keydown',

            function(event) {  

                // 获取按键的代码(包括数字键和特殊键,如箭头键、功能键等)   
                const keyCode = event.key; 
                
                // 拼凑输出字符串
                const message = `键盘 ${keyCode}  被按下`; 


                // 将拼凑好的字符串,添加到输出区域  
                outputDiv.textContent += message + '\n';  
    
                outputDiv.scrollTop = outputDiv.scrollHeight;  
                // 自动滚动到输出区域的底部 
                // clientHeight 获取元素高度包括 padding 部分,但是不包括 border/margin 
                // clientWidth 获取元素宽度包括 padding 部分,但是不包括 border/margin 
                // scrollHeight 元素总高度,它包括 padding ,但是不包括 border/margin,  包括溢出的不可见内容
                // scrollWidth 元素总宽度,它包括 padding ,但是不包括 border/margin ,  包括溢出的不可见内容 
                // scrollLeft 元素的水平滚动条向右滚动的像素数量
                // scrollTop 元素的垂直滚动条向下滚动的像素数量

            }
        );  


    </script>  

 结果:

3.表单对象

form 对象(称表单对象或窗体对象)提供一个让客户端输入文字或选择的功能。例如单选按钮、复选框、选择列表等由<form>标签组构成,JavaScript 自动为每一个表单建立个表单对象,并可以将各个子元素中用户提供的信息送至服务器进行处理,当然也可以在JavaScript 脚本中编写程序,对数据进行处理。

表单中的基本元素(子对象)有按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等。在JavaScript 中婴访问这些基本元素,必须通过对应特定的表单元素的名字来实现.每一个元素主要是通过该元素的属性或方法来引用。注意,有些属性无法在页面设计时使用,只能在编程代码中使用。

调用form对象的一般格式为

<form name="表单名"action="URL"...>

<input type="表项类型"name="表项名”value="默认值”事件="方法函数"….>

</form>

1.Text单行单列输人元素

功能:对Text标识中的元素实施有效的控制。

属性:name,设定提交信息时的信息名称;value,用于设定出现在Text文本框中的value 值;defaultvalue,设定Text元素的默认值。

方法:blur(),当前焦点移出;select(),高亮文字。

事件:onFocus,当Text 获得焦点时,产生该事件;onBlur,当元素失去焦点时,产生该事件;onSelect,当文字被高亮显示后,产生该文件;onChange,当Text元素内的值改变时,产生该文件。

2.Textarea多行文本域输人元素

功能:对Textarea中的元素进行控制。

属性:name,设定提交信息时的信息名称;value,设定出现在Textarea多行文本域中的value值;defaultvalue,元素的默认值。

方法:Blur(),失去焦点;Select(),高亮文字。

事件:onBlur,当失去输入焦点后产生该事件;onFocus,当输入获得焦点后,产生该文件;onChange,当文字值改变时,产生该事件;onSelect,高亮文字,产生该文件。

3.Select 选择元素

功能:实施对下拉选择元素的控制。

属性:name,设定提交信息时的信息名称;value,用于设定Select下拉列表框中的value 值;length,对应Select 中的length;options,组成多个选项的数组;SelectIndex,指明

个选项;Text,选项对应的文字;Selected,指明当前选项是否被选中;Index,指明当前选

系的位置(索引值);defaultSelected,默认选项。

事件:onBlur,当Select 选项失去焦点时,产生该事件;onFocus,当Select 获得焦点时,

产生该事件;onChange,选项状态改变后,产生该事件。

4.Button 按钮

功能:对Button按钮的控制。

属性:name,设定提交信息时的信息名称,对应文档中Button的name;value,设定当

前按钮上显示的value值。

方法:Click(),该方法类似于单击一个按钮。

事件:onClick,当单击Button按钮时,产生该事件。

5.Checkbox复选框

功能:实施对一个具有复选框中元素的控制。

属性:name,设定提交信息时的信息名称;value,用于Checkbox复选框旁边显示的

value 信息;Checked,该属性设定复选框的选中状态,Checked值为被选中。

方法:Click():使得鼠标单击复选框的某一个项。事件:onClick:当复选框被选中时,产生该事件。

6.Password口令

功能:对具有口令输入模式的文本框元素的控制。

属性:name,设定提交信息时的信息名称,对应HTML文档中 Password中的name;value,用于设定出现在 Password文本框中的密文模式的 value 值;defaultvalue,Password文本框中的密文模式的默认值。

方法:Select(),高亮口令文本;Blur(),失去 Passward焦点;Focus(),获得 Password焦点。

7.Submit 提交元素

功能:对一个具有提交功能按钮的控制。

属性:name,设定提交信息时的信息名称,对应HTML文档中Submit;value,用于设

定提交按钮上显示的value值。

方法:Click(),相当于单击Submit 按钮。

事件:onClick,当单击该按钮时,产生该事

代码:

<body>
     <!-- 简单的HTML表单 -->  
     <form id="myForm" >  
        姓名: <input type="text" id="name" value="在此处输入你的姓名">  <br>  
        邮箱: <input type="email" id="email" value="在此处输入你的邮箱">  <br>  
        <input type="submit" value="提交">
        <input type="reset" value="重置">  
</body>
<script>
    // 获取表单节点
    const form = document.getElementById('myForm');  
  // 添加“表单提交”事件监听器  
  form.addEventListener('submit', 
            function(event) {  
                event.preventDefault();   // 阻止表单的“默认提交行为”

                 // 弹出警告框(在实际应用中,你可能会在这里进行AJAX请求或其他处理)  
            alert('表单提交按钮被按下! (但默认提交行为被截止了)');  
                   // 你可以在这里添加其他代码来处理表单数据  
            // 例如,获取输入值:  
            const name = document.getElementById('name').value;  
            const email = document.getElementById('email').value;  
            console.log('Name:', name);  
            console.log('Email:', email);  
            }
        ); 
          // 添加表单重置事件监听器  
          form.addEventListener('reset', 
            function(event) {  
            // 弹出警告框
            alert('表单已经重置! ');  


            }
        );
         // 1.获取姓名输入框节点
         const inputElement = document.getElementById('name'); 
        // 2.为表单的姓名输入框添加 select 选中事件监听器  
        inputElement.addEventListener('select', 
     function(event) {  
         console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);  //打印选中文本的起始索引和结束索引
     // 注意: selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引
        const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);  
        console.log('已选中文本:', selectedText);  
            }
    );



</script>
</html>