總結自己用原生JS實現的功能
阿新 • • 發佈：2019-02-20
1.實現jquery中addClass()和removeClass()的功能：
function addClass( obj, className){
if( obj.className ==''){
obj.className = className;
}else{
var arrClassName = obj.className.split(' ');
if(arrIndexOf( arrClassName, className) ==-1){
obj.className += ' '+className;
}
}
}
function 2.寫一個placeholder的相容函式，value為“請輸入內容”。當獲取焦點時清空，失去焦點且為空時恢復。
<body>
<input type="text" value="請輸入內容" id="text1" />
<script>
var 2.實現了事件繫結函式：
function bind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj);//呼叫call方法，在IE下將this從指向window改為指向當前物件
}
)}
}3.實現事件解綁：
function removBind(obj,evname,fn,bl){
if(obj.removeEventListener){
obj.removeEventListener(evname,fn,bl)
}else{obj.detachEvent('on'+evname,fn,function(){
fn.call(obj);
})
}
}4.事件偵聽器：
var Event = {
// 頁面載入完成後
readyEvent : function (fn) {
if (fn == null) {
fn = document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn ;
}else{
window.onload = function () {
oldonload();
fn();
}
};
},
//新增事件
addEvent : function(element, type, hander) {
if (element.addEventListener) { //非IE
//事件型別、需要執行的函式、是否捕捉
element.addEventListener(type, hander, false);
}else if(element.attachEvent){ //IE
element.attachEvent('on' + type,function () {
hander.call(element);
})
}else{
element['on' +type] = hander;
};
},
//移除事件
removeEvent : function (element, type, hander) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false)
}else if (element.attachEvent) {
element.attachEvent('on' + type, hander);
}else{
element['on' + type] = null;
};
},
//阻止事件
stopPropagation : function (event) {
if (event.stopPropagation) {
event.stopPropagation(); //W3C標準
}else{
event.canceBubble = true; //IE
};
},
//取消預設事件
preventDefault : function (event) {
if (event.preventDefault) {
event.preventDefault();
};
},
//獲取事件目標
getTarget : function (event) {
return event.target|event.srcElement;
},
//獲取event物件的引用，取到事件的所有資訊，確保隨時能使用event；
getEvent:function (event) {
var event = event || window.event;
if (!event) {
var c = this.getEvent.caller;
while(!c){
event = c.arguments[0];
if (event && Event == ev.constructor) {
break;
};
c = c.caller;
}
};
return event;
}
}