菜罐的JavaScript学习随记（一）

最新推荐文章于 2024-08-05 11:08:01 发布

罐子丶

最新推荐文章于 2024-08-05 11:08:01 发布

阅读量128

点赞数

分类专栏： # JavaScript学习随记文章标签： javascript

本文链接：https://blog.csdn.net/qq_41219001/article/details/107919557

版权

JavaScript学习随记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.立即调用的函数表达式
2.节点遍历
3.将类数组对象NodeList转化为数组对象Array
4.按钮绑定函数时函数不需要加括号
5.IE浏览器匿名函数中的this指向window
6.Event对象属性及方法
7.Event对象跨浏览器兼容性写法
8.鼠标事件-mouseover和mouseout、mouseenter和mouseleave
9.keydown和keypress
10.DOMContentLoaded和load

1.立即调用的函数表达式

 <script>
       (function(){
       //使代码都在该作用域下执行，不污染window环境
       })()
 </script>

2.节点遍历

包含空白节点

firstChild
lastChild
nextSibling
previousSibling
childNodes[]
childNodes.length-节点个数

不包含空白节点（仅元素节点）

firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
children[]
childElementCount-节点个数

3.将类数组对象NodeList转化为数组对象Array

function makeArray(nodelist){
    var arr = null;
    try{
        // Array的slice方法在IE浏览器不适用
        return Array.prototype.slice.call(nodelist);
    }catch(e){
    	// 保证浏览器兼容
        arr = new Array();
        for(var i = 0, len = nodelist.length; i<len; i++){
            arr.push(nodelist[i]);
    	}
	}
	return arr;
}

4.按钮绑定函数时函数不需要加括号

<script>
	var btn = document.getElementById("btn");
	function clickBtn(){
		alert("我是按钮")；
	}
	// 如果是btn.onclick = clickBtn();则网页一刷新不用点击按钮就会调用clickBtn()函数。
	btn.onclick = clickBtn;
</script>

5.IE浏览器匿名函数中的this指向window

btn.attachEvent("onclick",function(){
    alert(this === window);
});

6.Event对象属性及方法

target：点击谁谁就是target,事件源
currentTarget：事件绑定在谁身上，就是谁

<div id="parent">
        <div id="child">点击</div>
</div>
<script>
    var parent = document.getElementById("parent");
    parent.addEventListener("click", function(event){
        // 点击儿子，事件绑定在父亲上面
        // target 点击谁谁就是target,事件源
        console.log(event.target);
        // currentTarget 事件绑定在谁身上，就是谁
        console.log(event.currentTarget);
    });
</script>

clientY：浏览器顶部底边到鼠标位置，不计算滚动轴的距离
pageY：浏览器顶部底边到鼠标位置，但是其计算滚动轴的距离
screenY：【屏幕】顶部到鼠标位置

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #height{
            height: 2000px;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div id="height"></div>
    <script>
        var height_ = document.getElementById("height");
        height.addEventListener("click", function(event){
            alert("clientY:"+event.clientY+";pageY"+event.pageY+";screenY"+event.screenY);
        });
    </script>
</body>

7.Event对象跨浏览器兼容性写法

兼容性代码块：

<script type="text/javascript">
   var EventUtil = {
        addHandler:function(element,type,handler){
            //绑定事件
            //Chrome Firefox IE9等     addEventListener 
            //IE8及IE8以下的浏览器     attachEvent 
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if (element.attachEvent) {
                element.attachEvent("on"+ type,handler);
            } else{
                element["on"+type] = handler 
            }
        },
        removeHandler: function(element,type,handler){
            //移除事件
            //Chrome Firefox IE9等      
            //IE8及IE8以下的浏览器     
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if (element.detachEvent) {
                element.detachEvent("on"+type,handler);
            } else{
                element["on"+type] = handler
            }
        },
        getTarget: function(event){
            return event.target || event.srcElement;
        },
        preventDefault: function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }
</script>

示例：

<body>
    <div id="parent">
        <div id="child">点击我</div>
    </div>
    <a id="a" href="http://www.baidu.com">跳转链接</a>
    <script type="text/javascript">
       /**
       ...
       插入兼容性代码块
       ...
       **/
        var parent = document.getElementById("parent");
        EventUtil.addHandler(parent, "click", function(event){
            alert("parent被触发了！");
        });

        var child = document.getElementById("child");
        EventUtil.addHandler(child, "click", function(event){
            alert("child被触发了！");
            var target = EventUtil.getTarget(event);
            console.log(target);
            EventUtil.stopPropagation(event);
        });

        var a = document.getElementById("a");
        EventUtil.addHandler(a, "click", function(event){
                EventUtil.preventDefault(event);
        });
    </script>
</body>

8.鼠标事件-mouseover和mouseout、mouseenter和mouseleave

mouseover：进入目标元素或者其子元素时候执行
mouseout：离开目标元素或者子元素时候执行

EventUtil.addHandler(div, "mouseover", function(){
	...
});
EventUtil.addHandler(div, "mouseout", function(){
	...
});

mouseenter：只能进入目标元素时候才去触发
mouseleave：只能离开目标元素时候才去触发

EventUtil.addHandler(div, "mouseenter", function(){
	...
});
EventUtil.addHandler(div, "mouseleave", function(){
	...
});

9.keydown和keypress

keydown：键码，任意键触发

...
<input type="text" id="myText"></input>]
...
.
...
var myText = document.getElementById("myText");
	EventUtil.addHandler(myText, "keydown", function(event){
		console.log(event.keyCode);
})

keypress：ASCII码，字符键触发

...
<input type="text" id="myText"></input>]
...
.
...
var myText = document.getElementById("myText");
	EventUtil.addHandler(myText, "keypress", function(event){
		console.log(event.charCode);
})

10.DOMContentLoaded和load

DOMContentLoaded：在DOM树加载之后就会触发，不理会图像、js文件、css文件或者其他资源是否已经下载，所以速度比load快

EventUtil.addHandler(document, "DOMContentLoaded", function(event){
	...
})

罐子丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜罐的JavaScript学习随记（一）

1.立即调用的函数表达式 <script> (function(){ //使代码都在该作用域下执行，不污染window环境 })() </script>2.节点遍历包含空白节点firstChildlastChildnextSiblingpreviousSiblingchildNodes[]不包含空白节点（仅元素节点）firstElementChildlastElementChildnextElementS
复制链接

扫一扫

专栏目录