javascript(중국어 버전)_javascript 기술에서 가장 일반적으로 사용되는 10가지 사용자 정의 기능

(10)addEvent
인터넷에서 가장 인기 있는 버전은 Scott Andrew의 버전입니다. JavaScript 커뮤니티에서 대회를 열거나(Pro Javascript Techniques의 100페이지에서 이 이벤트를 볼 수 있음) PPK 웹사이트를 검색하여 요청한다고 합니다. 이벤트 추가 및 이벤트 제거 기능으로 승리자가 됩니다. 그의 구현은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function addEvent( elm, evType , fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);//DOM2.0
return true; >else if (elm.attachEvent) {
var r = elm.attachEvent('on' evType, fn);//IE5
return r
}
else {
elm[ 'on' evType] = fn;//DOM 0
}
}


다음은 Dean Edwards 버전

코드 복사 코드는 다음과 같습니다:

// addEvent/removeEvent 작성자: Dean Edwards, 2005

// Tino Zijdel의 입력
// http:// dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {
//각 이벤트 핸들러 함수에 고유 ID 할당
if ( !handler.$$guid) handler.$$guid = addEvent.guid;
//if (!element.events) 요소의 이벤트 유형에 대한 해시 테이블을 생성합니다. events = {};//각 "요소/이벤트" 쌍에 ​​대한 이벤트 핸들러의 해시 테이블 생성
var handlers = element.events[type]
if (!handlers) {
handlers = element .events[type] = {};//기존 이벤트 핸들러 저장(있는 경우)
if (element["on" type]) {
handlers[0] = element[" on " type];
}
}
//이벤트 핸들러 함수를 해시 테이블에 저장
handlers[handler.$$guid] = handler;
//전역 이벤트 할당 핸들러 함수는 모든 작업을 수행합니다
element["on" type] = handlerEvent
//고유 ID를 생성하는 데 사용되는 카운터
addEvent.guid = 1; (요소, 유형, 핸들러) {
//해시 테이블에서 이벤트 핸들러 함수 삭제
if (element.events && element.events[type]) {
delete element.events[type ][handler. $$guid];
}
};
function handlerEvent(event) {
var returnValue =
//이벤트 객체 캡처(IE에서는 전역 이벤트 객체 사용)
event = event || fixEvent(window.event);
//이벤트 처리 함수의 해시 테이블에 대한 참조 가져오기
var handlers = this.events[event.type]// 각 핸들러 함수 실행
for (var i in handlers) {
this.$$handleEvent = handlers[i]
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return value;
}
//IE의 이벤트 객체에 "누락된" 함수 추가
function fixEvent(event) {
//표준 W3C 메소드 추가
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble =
}; 함수는 매우 강력하며 IE의 이러한 포인팅 문제를 해결합니다. 이벤트는 항상 첫 번째 매개변수로 전달되므로 브라우저 간 사용이 쉬워집니다.
또한 HTML5 워킹 그룹 버전도 소중히 여겼습니다.




코드 복사


코드는 다음과 같습니다.

var addEvent=(function(){
if(document.addEventListener){
return function(el,type,fn){

if(el.length){ for( var i=0;iaddEvent(el[i],type,fn) } }else{ el.addEventListener (type,fn, false); }

};

}else{
return function(el,type,fn){
if(el.length){
for (var i=0 ;iaddEvent(el[i],type,fn)
}
}else{
el.attachEvent('on' type,function() {
return fn.call(el,window.event);
}
}
}


(9) addLoadEvent()
이 기능에 대해서는 자세히 설명하지 않고 약간 느릴 뿐입니다. 주요 라이브러리에서는 기본적으로 이를 무시하고 자체적으로 domReady 버전을 구현합니다. 다음은 Simon Willison의 구현입니다.




코드 복사


코드는 다음과 같습니다.


var addLoadEvent = function( fn) {

var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload =
}else {

window.onload = function() { oldonload(); fn() } } }

(8) getElementsByClass()
저는 수집하는 습관이 있고 많은 버전을 가지고 있는데, 마침내 스스로 브레인스토밍하고 구현했습니다. 다음은 내 구현입니다.

코드 복사 코드는 다음과 같습니다.

var getElementsByClassName = function (searchClass , node,tag) {
if(document.getElementsByClassName){
return document.getElementsByClassName(searchClass)
}else{
node = node || 태그 || "*";
var 클래스 = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.getElementsByTagName(tag) ,
patterns = [],
returnElements = [],
current,
match
var i =classes.length
while(--i >= 0) {
patterns.push(new RegExp("(^|\s)" 클래스[i] "(\s|$)"))
}
var j = elements.length; >while( --j >= 0){
current = elements[j];
match = false
for(var k=0, kl=patterns.length; kmatch = 패턴[k].test(current.className);
if (!match) break
}
if (match) returnElements.push(current); }
return returnElements;
}
}


(7) cssQuery()
별칭은 Dean Edwards가 처음 구현한 getElementsBySeletor입니다. JQuery 및 기타 클래스 라이브러리에는 해당 구현이 있으며 그 중 JQuery는 이를 $() 선택기에 통합하고 그 명성은 이전 버전의 명성을 뛰어넘습니다. 그러나 IE8과 같은 최신 브라우저는 이미 querySelector 및 querySelectorAll 메소드를 구현했습니다. IE6 및 IE7이 폐기되면 쓸모가 없게 됩니다. Wuyou는 구현 원칙에 대해 설명했습니다. 너무 길어서 내용이 잘 안 나오네요. 자세한 내용은 원저자 홈페이지에서 확인하시면 됩니다.

(6) 토글()
은 DOM 요소를 표시하거나 숨기는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다. functionggle(obj) {

var el = document.getElementById(obj);

if ( el.style.display != 'none' ) {
el.style.display = 'none''
}
else {
el .style.display = '';
}
}


(5) insertAfter()
DOM은 insertBefore만 제공하므로 insertAfter를 구현해야 합니다. 우리 스스로. 하지만 이제 Firefox를 제외한 모든 브라우저에서는 insertAdjacentElement가 더 나은 선택이라고 생각합니다. Jeremy Keith 버전은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. function insertAfter( parent, node, referenceNode) {

parent.insertBefore(node, referenceNode.nextSibling)

}


(4) inArray()
는 무언가가 존재하는지 확인하는 데 사용됩니다. check 배열 값에서는 Prototype 클래스 라이브러리에서 다음 메서드를 가져옵니다.

코드 복사 코드는 다음과 같습니다. Array.prototype.inArray = 함수(값 ) {

for (var i=0,l = this.length ; i if (this[i] === value) {
return true; }
}
return false;
};


다른 버전: