第十章事件event

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

W_Queen&

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

阅读量246

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_45983879/article/details/109605811

版权

outerHtml/innerHTML/innerHTML

简单地说innerHTML和outerHTML,innerText的不同之处在于:

innerHtml将元素中所有的内容都获取到包括HTML标签,但是不包括自身标签innerText
innerText将元素的内容获取出来不包括HTML标签
outerHtml将自身以及元素所有的内容都获取出来包括HTML标签包括自身标签

    <body>
        <div id="d">
            老王<span>住你隔壁</span>
        </div>
    </body>
    <script>
        var x  = document.getElementById("d");
        console.log(x.innerHTML);
        console.log(x.innerText);
        console.log(x.outerHTML);
    </script>

自定义属性及getAttribute/setAttribute方法

        <div id="d"></div>
        //setAttribute("属性名称","属性值名称")
        //getAttribute("属性名称") : 返回属性名称对应的属性值
        //我们可以通过setAttribute设置自定义属性
        var d = document.getElementById("d");
            d.setAttribute("heihei",123);
            document.write(d.getAttribute("heihei"));

获取非行内样式(兼容问题)

行内样式:行内样式就是卸载标签内的样式:如<div style="color:red;"></div>,在这里color样式就是行内样式.
非行内样式:非行内样式就是指不是写在标签体内的style属性的样式.如<style>...</style>内的定义样式或引用的外部css文件都是非行内样式.

  <div id="box" style="color: red;"> </div>
  var d = document.getElementById("box");
          //获取行内样式
  document.write(d.style.color);
  #box{
       color: blue;
  }
  var d = document.getElementById("box");
  //获取非行内样式
  document.write(d.style.color); 返回空 
  ----------------------------------------
  #box{
       color: red;
       font-size: 22px;
  }
  //照抄 扩展 兼容性
  var d = document.getElementById("box");
  function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
     if(obj.currentStyle){       //针对ie获取非行间样式
         return obj.currentStyle[attr];
     }else{
         return getComputedStyle(obj,false)[attr];   //针对非ie
     };
  };
  document.write(getStyle(d,"color") + "</br>");
  document.write(getStyle(d,"font-size"));

insertBefore:添加到一个节点前面

父节点.insertBefore(要添加的子节点,参照节点);参照节点如果为null那就和appendChild()一样

     <html>
     <head>
         <meta charset="utf-8">
         <title></title>
     </head>
     <body>
         <ul id="list">
             <li>槑槑</li>
             <li>晶晶</li>
             <li>叕叕</li>
         </ul>
     </body>
 </html>
 <script>
     var list = document.getElementById("list");
     var o = document.createElement("li");
     o.innerHTML = "淼淼";    
     //如果参数2位null，则和appendChild一样
     //list.insertBefore(o,null);
     list.insertBefore(o,list.children[2]);
 </script>

offsetWidth/offsetHeight/offsetLeft/offsetTop

 	        <style>
 	                *{
 	                    margin: 0;
 	                    padding: 0;
 	                }
 	                #big{
 	                    border: 1px solid red;
 	                    position: relative;
 	                    height: 400px;
 	                    width: 400px;
 	                }
 	                #small{
 	                    border: 1px solid red;
 	                    position: absolute;
 	                    height: 100px;
 	                    width: 100px;
 	                    left: 80px;
 	                    top: 70px;
 	                }
 	            </style>
 	        </head>
 	        <body>
 	            <div id="big">
 	                <div id="small">
 	                    
 	                </div>
 	            </div>
 	        </body>
 	    </html>
 	    <script>
 	        var d = document.getElementById("small");
 	        //只读
 	        document.write(d.offsetLeft + " " + d.offsetTop + "</br>");
 	        //这2是哪来的?
 	        document.write(d.offsetWidth + " " + d.offsetHeight);
 	        //d.style.left = 200 + "px";
 	    style.left返回字符串 如20px, offsetLeft返回数值 如20
 	    style.left读写,offsetLeft只读
 	    style.left必须要事先定义，否则值为空
 	    //style.height style.width style.top 也一样

window.onscroll事件

回到顶部的案例

          <body>
                <div id="t">
                    <p>111111111111111</p>
                                ....
                    <p>111111111111111</p>
                </div>
                <button onclick="fun()">按钮</button>
            </body>
        </html>
        <script>
            var _top = null;
            window.onscroll = function(){
                //兼容问题  获取滚动条移动的垂直距离
                _top = document.body.scrollTop || document.documentElement.scrollTop;
                console.log(_top);
            }
            function fun(){
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            }
        </script>

事件

事件对象

事件:对某个元素的某种操作
事件对象:当某个事件触发时产生的对象,就是事件对象.
event使用前提,必须有事件,不同的事件产生的事件对象不同.
事件对象的兼容性:var e = evt || event;
事件对象拥有该事件先关的属性和方法

    //事件对象 event,onkeydown是键盘按下的状态,onkeyup是键盘按下跳起来之后的效果.
    document.onkeydown=function(evt){
    var e = evt || event;
    alert(e);
}

案例:小老虎跳一跳

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #box {
                height: 100px;
                width: 100px;
                background: url(img/1.png);
                background-size: 100px 100px;
                position: absolute;
                left: 200px;
                top: 600px;
            }
        </style>
    </head>
    <body>
        <div id="box" onclick="jump()"></div>
    </body>
    </html>
    <script>
        var d = document.getElementById("box");
        function jump() {
            d.style.top = d.offsetTop - 200 + "px";
            setTimeout(function() {
                d.style.top = "600px";
            }, 2000);
        }
    </script>

鼠标事件对象的属性

坐标属性:
pageX/pageY相对于整个文档顶部和左侧的坐标
clientX/clientY相对于局部窗口的左侧和顶部的坐标
offsetX/offsetY 相对于内部元素的距离左侧和顶部的坐标常用于拖拽

     document.onclick = function(evt) {
     var e = evt || event;
     console.log("client" + e.clientX + "," + e.clientY); //只记录当前局部页面算,用的比较少
     console.log("page" + e.pageX + "," + e.pageY); //从document页面算起...习惯上用page,比较常用,
     console.log("offset" + e.offsetX + "," + e.offsetY); //用于拖拽
    }

案例:图片跟随鼠标移动

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                #tiger{
                    height: 100px;
                    width: 100px;
                    background-image: url(img/3.jpg);
                    background-size: 100px 100px;
                    position: absolute;
                    left: 200px;
                    top:500px;
                }
            </style>
        </head>
        <body>
            <div id="tiger">
                
            </div>
        </body>
    </html>
    <script>
        var oTiger = document.querySelector("#tiger");
        
        document.onmousemove = function(evt){
            var e = evt || event;
            
            oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";
            oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px";
        }
    </script>

键盘事件

onkeyup:用户释放某一个按键时发生,任何一个按键即可发生事件
onkeypress:用户按下按键,并且产生一个字符时发生(意思就是说按ctrl这样的按键没有效果的)
onkeydown:用户按下按键时发生,任何一个按键即可发生事件

事件对象的属性:
keyCode:获取键盘按键值字母对应其ASCII值识别
A:65 a:97 0:48 回车:13
注意:keyPress的ctrl+回车返回值为10

     document.onkeypress = function(evt)
    {
         var e = evt || event;
        if(e.keyCode == 13 || e.keyCode == 10 && e.ctrlKey)
        {alert("send");}
    }
     // ctrlKey:返回当事件被触发时，"Ctrl" 是否被按下,返回值为true or false
     //【注意】:键盘检测兼容写方法
     var key = e.keyCode || e.which || e.charCode;

W_Queen&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十章事件event

outerHtml/innerHTML/innerHTML简单地说innerHTML和outerHTML,innerText的不同之处在于:innerHtml将元素中所有的内容都获取到包括HTML标签,但是不包括自身标签innerTextinnerText将元素的内容获取出来不包括HTML标签outerHtml将自身以及元素所有的内容都获取出来包括HTML标签包括自身标签 <body> <div id="d"> 老王&lt
复制链接

扫一扫