js知识点，给对象绑定时间

最新推荐文章于 2022-07-16 10:28:07 发布

abchsgqs

最新推荐文章于 2022-07-16 10:28:07 发布

阅读量343

点赞数 4

文章标签： javascript js html

本文链接：https://blog.csdn.net/abchsgqs/article/details/104463229

版权

js 知识点

给对象绑定事件

在这里插入图片描述

当点击按钮时，触发不同的行为，就是给对象绑定了不同的事件。

给对象绑定事件分为

1.内联模式 2.外联模式

            function btnClick(){
                alert("内联模式");
            }

            window.onload = function(){
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = function(){
                    alert("外联模式");
                }
            }

        <button onclick ="btnClick();">内联模式</button>
        <button id='btn1'>外联模式</button>

在这里插入图片描述

事件绑定格式：元素节点.on + 时间类型 = 函数；
在这里插入图片描述

js 中可以在页面节点上绑定的事件

鼠标事件：

可应用与页面任意一个节点上

click 单击

dblclick 双击

mouseover 鼠标移入

mouseout 鼠标移出

mousemove 鼠标移动（会不停的触发）

mousedown 鼠标按下

mouseup 鼠标抬起

mouseenter 鼠标移入

mouseleave 鼠标移出



            window.onload = function(){
                var nodes = document.getElementsByTagName("button");
                nodes[0].onclick = function(){
                    alert("点击");
                }
                nodes[1].ondblclick = function(){
                    alert("双击");
                }
                nodes[2].onmousedown = function(){
                    nodes[2].innerHTML = "按下";
                }
                nodes[2].onmouseup = function(){
                    nodes[2].innerHTML = "抬起";
                }
                nodes[3].onmouseover = function(){
                    nodes[3].innerHTML = "移入";
                }
                nodes[3].onmouseout = function(){
                    nodes[3].innerHTML = "移出";
                }

		    <body>
		        <button>单击</button>
		        <button>双击</button>
		        <button>按钮</button>
		        <button>按钮</button>
		    </body>

键盘事件：

实现快捷键，实现表单的输入操作

最好绑定在全局：window,document,input,textarea

keydown 支持任意键的按下触发，当按住时重复触发

keypress 只支持字符键的按下触发，不支持功能键ctrl+shift+大小写切换的键位，当按住时重复触发

keyup 弹起时触发

            window.onload = function(){
        
                window.onkeydown = function(){
                    document.title = "任意键按下";
                }
            }
            
            window.onload = function(){
            
                  window.onkeypress = function(){
                    document.title = "字符键按下";
                }
            }
            
              window.onload = function(){
            
                  window.onkeyup = function(){
                    document.title = "抬起";
                }
            }

HTML 的 window事件：

load 当页面加载完成以后会触发

unload 只有IE兼容，整个窗口在解构时触发
解构：刷新页面时，新窗口替换旧窗口。

scroll 页面滚动

resize 窗口大小发生变化的时候触发



            window.onload = function(){
           
                var i = 0;
                window.onscroll = function(){
                    document.title = i++;
                }
                
                window.onresize = function(){
                    document.title = i++;
                }
            }
   
		    <body style = 'height: 3000px'>
		        <h1>标题</h1>
		        <h1>标题</h1>
		        <h1>标题</h1>
		        <h1>标题</h1>
		        <h1>标题</h1>
		        <h1>标题</h1>
		        <h1>标题</h1>
		        <h1>标题</h1>
		    </body>

HTML 的表单事件：

只能绑定在input 或者textarea 上

blur 失去焦点

focus 获取焦点

select 当我们在输入框内选中文本的时候触发

change 当我们对输入框的文本进行修改并且失去焦点的时候

submit 当我们点击submit上的按钮才能触发

reset 当我们点击reset上的按钮才能触发

注：submit,reset 必须绑定在form这个元素节点上。



            window.onload = function(){
                var oInput = document.getElementById("input1");
                // oInput.onblur = function(){
                //     oInput.value = '失去焦点';
                // }
                // oInput.onfocus = function(){
                //     oInput.value = '获取焦点';
                // }
                // oInput.onselect = function(){
                //     alert("选中文本");
                // }
                oInput.onchange = function(){
                    alert("文本内容发生改变，并且失去焦点");
                }
            }

		    <body>
		        <input type="text" id = 'input1' value = '默认文本'> 
		    </body>




                submit：  当用户点击提交按钮在<form>元素上触发。  
                reset：    当用户点击重置按钮在<form>元素上触发。
      
            window.onload = function(){
                var oF1 = document.getElementById("f1");
                oF1.onsubmit = function(){
                    alert("提交");
                }
                oF1.onreset = function(){
                    alert("重置");
                }
            }
    
		    <body>
		        <form action="" id = f1>
		            <input type="submit">
		            <input type="reset">
		        </form>
		    </body>

abchsgqs

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js知识点，给对象绑定时间

js 知识点给对象绑定事件当点击按钮时，触发不同的行为，就是给对象绑定了不同的事件。给对象绑定事件分为1.内联模式 2.外联模式 function btnClick(){ alert("内联模式"); } window.onload = function(){ ...
复制链接

扫一扫