JavaScript-17-事件

最新推荐文章于 2023-12-19 00:08:54 发布

bdevy

最新推荐文章于 2023-12-19 00:08:54 发布

阅读量144

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_38328762/article/details/100105842

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的事件触发机制，事件源以及各种事件类型，如window.onload、window.onscroll等。同时，提供了兼容不同浏览器的解决方案，并举例说明了onclick、onfocus、onchange等常见事件的使用。通过示例展示了如何检测用户名输入等交互功能。

摘要由CSDN通过智能技术生成

事件

事件触发机制
1. 事件源：网页元素
2. 事件
3. 行为:函数

事件

window事件

window.onload 和 window.onunload 和 window.onbeforeunload

 window.onload=function(){
     console.log('onload....')
 };
 window.onbeforeunload=function(){
     console.log('before...unload...')
 };
 window.onunload=function () {
     console.log('unload......')
 };

注意不能用alert(‘sss’);

window.onscroll：页面滚动

 // 页面滚动控制导航
 <body>
     <div class="container">
         <header id="nav"></header>
         <div class="main"></div>
     </div>
 
 <script>
     var t_before=0;
     window.onscroll=function () {
         var t=document.documentElement.scrollTop || document.body.scrollTop;
         if (t>100 && t>t_before){
             document.getElementById('nav').style.display='none';
         } else{
             document.getElementById('nav').style.display='block';
         }
         t_before=t;
     }
 
 </script>
 </body>

谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；如上

window.onerror

window.open(‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no’) //该句写成一行代码

 window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行

  参数解释：      
     window.open 弹出新窗口的命令； 
 　　'page.html' 弹出窗口的文件名； 
 　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 
 　　height=100 窗口高度； 
 　　width=400 窗口宽度； 
 　　top=0 窗口距离屏幕上方的象素值； 
 　　left=0 窗口距离屏幕左侧的象素值； 
 　　toolbar=no 是否显示工具栏，yes为显示； 
 　　menubar，scrollbars 表示菜单栏和滚动栏。 
 　　resizable=no 是否允许改变窗口大小，yes为允许； 
 　　location=no 是否显示地址栏，yes为允许； 
 　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许

window.close() 关闭页面
window.scrollTo()滚动到 window.scrollBy()滚动多少

标签事件

onclick

几乎所有都可以onclick
onfocus【onclick != onfocus】

可以：文本框、按钮

不可以：图片

btn.focus()
onblur：失去焦点

检测用户名、密码…

btn.blur()
onchange：失去焦点+内容改变

可以：input、select…

不可以：按钮

当文本框失去焦点后并且文本的内容发生变化时，触发该事件
```
 var text1=document.getElementById('txt01');
 text1.onchange=function () {
     alert(text1.value);
 }
```
onmouseover

onmouseout

 <div class="divcss" id="div01"></div>
 <div class="divcss" id="div02"></div>

 <script>
     var div01=document.getElementById('div01');
     var div02=document.getElementById('div02');
     div02.onmouseover=function () {
         div02.style.background='red';
 //            div01.style.background='yellow';
 //            document.body.style.background='grey'
         }
         div02.onmouseout=function () {
             div02.style.background='blue';
 //            div01.style.background='black';
 //            document.body.style.background='white'
 
         }
 </script>

onkeydown
onkeyup

onkeypress = onkeydown + onkeyup

  text1.onkeyup=function (event) {
    
// key表示按键的内容（区分大小写）
      alert(event.key);
//keycode表示按钮的ascii码
     alert(event.keyCode);
// 回车的asci是13
     if(event.keyCode==13){
            text1.blur();
      }
}

补充

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度

对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

兼容所有浏览器：

 var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

 window.onscroll = function(){
 var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离
 var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
 var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离（总高度）

 console.log('a=',a);
 console.log('b=',b);
 console.log('c=',c);
 }

小实例

测试用户名输入框

 <body>
 <input type="text" id="user_id" required><br/>
 <input type="text" id="user_psw"><br/>
 <span id="info"></span>
 
 <script>
     var user_id=document.getElementById('user_id');
     var user_psw=document.getElementById('user_psw');
     var info=document.getElementById('info');
 
     user_id.focus();
     user_id.onchange=function(){
         if (this.value.length<6){
             info.innerText='用户名长度不够';
         }else{
             info.innerText='';
         }
     };
     user_id.onkeypress=function(ev){
         if (ev.key.toLowerCase()=='enter'){
             user_psw.focus(); /* 下个获取焦点，this 自动失去 */
         }
     };
 </script>

2…