유이 학습노트(둘) 간단한 DOM 이벤트
3047 단어 학습 노트
하나.의 목적
div를 누르면 div의 텍스트가 바뀌고 배경색도 바뀝니다.
둘.경로
YUI에서 DOM에 대한 작업을 사용해야 합니다.
셋.지식을 이해하다
1. 모듈 로드(Modules)
YUI3은 주로 롤립 모듈(부품)에 대한 정의를 추가했다(즉 하위 모듈로 구성된 모듈)
2. 위젯과 모듈을 불러오기(Rollups & Modules)
YUI().use () 는 모듈과 부품을 불러올 수 있습니다.
모듈은 다시 사용할 수 있는 코드를 가리킨다.
위젯(Rollup)은 여러 개의 모듈로 구성된 슈퍼 모듈이다.예를 들어 node는 구성 요소로 node-base, node-style 및 기타 조작DOM을 포함하는 모듈이다.
3. 조직 구조
유이3은 구조적으로 4가지 유형으로 나뉜다.
피드: 이 모듈은 YUI3의 단일 핵심으로 페이지에 이 모듈을 포함해야 합니다. 이 모듈은 마운트 기능을 제공하기 때문에 YUI의 피드라고 할 수 있습니다.유이3에서 안내층 역할을 하고 페이지에 피드 관련 파일을 도입하여 유이()를 호출합니다.use () 방법은 유이3 핵심 클래스와 구성 요소 클래스를 안전하고 신속하게 불러올 수 있습니다.YUI Base, Get 및 Loader 모듈이 포함되어 있습니다.
핵심: 핵심 모듈은 YUI3 하위 구성 요소에 일반적인 의존을 제공합니다.이 모듈은 OOP 모듈(대상 계승 메커니즘 제공, DOM 등 절대 다수의 모듈이 OOP에 직접 또는 간접적으로 의존), Dom 모듈(기초적인 DOM 조작과 선택 클래스 제공), Node 모듈(Dom 모듈을 바탕으로 문서 노드의 창설, 선택과 조작 등 방법을 제공하여 YUI2에 비해 매우 간소화됨),Event 모듈(브라우저의 차이를 차단하는 이벤트 등록 및 응답 메커니즘을 제공하며 고급 사용자 정의 이벤트를 제공하는 기능)
구성 요소 프레임워크: 구성 요소 프레임워크는 YUI 핵심 프레임워크를 기반으로 합니다.아래에서 위로 Attribute,Base,Widget 모듈로 구성됨;유연한 확장을 위한 Plugin 모듈을 제공합니다.구성 요소 프레임워크는 구성 요소를 구축하고 확장하는 기초입니다.
구성 요소:yui3에서 제공하는 고도 모듈화 재사용 가능한 구성 요소는 프로그램에 따라 관련 모듈을 도입하면 됩니다.YUI3는 현재 애니메이션, Drag and Drop, IO, 쿠키, JSON 등 기초 구성 요소 모듈을 제공하고 있다.
넷.코드 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<!-- YUI -->
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y)
{
var helloWorld =
function(e)
{
e.target.setHTML("<p>Hello World!</p>");
e.target.setStyle('background-color', 'orange');
};// helloword
var myDiv = Y.one("#container");//Y.one() ， id="container"
myDiv.on("click", helloWorld);// Node on myDiv click， helloword
});
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 100px; background-color: pink;">
<p style="margin-top: 40px; padding-top: 40px; padding-left: 40px;">Click for Hello World test.</p>
</div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
axios 요청 차단, 응답 차단,router 내비게이션 수위
axios 요청 차단: 요청 헤더에 token 등을 통일적으로 추가할 수 있습니다
axios 응답 차단: 로그인 판단
내비게이션 선행 수위beforeEach: 로그인 여부를 판단할 수 있지만, 응답으로 차단하는 것이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
YUI에서 DOM에 대한 작업을 사용해야 합니다.
셋.지식을 이해하다
1. 모듈 로드(Modules)
YUI3은 주로 롤립 모듈(부품)에 대한 정의를 추가했다(즉 하위 모듈로 구성된 모듈)
2. 위젯과 모듈을 불러오기(Rollups & Modules)
YUI().use () 는 모듈과 부품을 불러올 수 있습니다.
모듈은 다시 사용할 수 있는 코드를 가리킨다.
위젯(Rollup)은 여러 개의 모듈로 구성된 슈퍼 모듈이다.예를 들어 node는 구성 요소로 node-base, node-style 및 기타 조작DOM을 포함하는 모듈이다.
3. 조직 구조
유이3은 구조적으로 4가지 유형으로 나뉜다.
피드: 이 모듈은 YUI3의 단일 핵심으로 페이지에 이 모듈을 포함해야 합니다. 이 모듈은 마운트 기능을 제공하기 때문에 YUI의 피드라고 할 수 있습니다.유이3에서 안내층 역할을 하고 페이지에 피드 관련 파일을 도입하여 유이()를 호출합니다.use () 방법은 유이3 핵심 클래스와 구성 요소 클래스를 안전하고 신속하게 불러올 수 있습니다.YUI Base, Get 및 Loader 모듈이 포함되어 있습니다.
핵심: 핵심 모듈은 YUI3 하위 구성 요소에 일반적인 의존을 제공합니다.이 모듈은 OOP 모듈(대상 계승 메커니즘 제공, DOM 등 절대 다수의 모듈이 OOP에 직접 또는 간접적으로 의존), Dom 모듈(기초적인 DOM 조작과 선택 클래스 제공), Node 모듈(Dom 모듈을 바탕으로 문서 노드의 창설, 선택과 조작 등 방법을 제공하여 YUI2에 비해 매우 간소화됨),Event 모듈(브라우저의 차이를 차단하는 이벤트 등록 및 응답 메커니즘을 제공하며 고급 사용자 정의 이벤트를 제공하는 기능)
구성 요소 프레임워크: 구성 요소 프레임워크는 YUI 핵심 프레임워크를 기반으로 합니다.아래에서 위로 Attribute,Base,Widget 모듈로 구성됨;유연한 확장을 위한 Plugin 모듈을 제공합니다.구성 요소 프레임워크는 구성 요소를 구축하고 확장하는 기초입니다.
구성 요소:yui3에서 제공하는 고도 모듈화 재사용 가능한 구성 요소는 프로그램에 따라 관련 모듈을 도입하면 됩니다.YUI3는 현재 애니메이션, Drag and Drop, IO, 쿠키, JSON 등 기초 구성 요소 모듈을 제공하고 있다.
넷.코드 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<!-- YUI -->
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y)
{
var helloWorld =
function(e)
{
e.target.setHTML("<p>Hello World!</p>");
e.target.setStyle('background-color', 'orange');
};// helloword
var myDiv = Y.one("#container");//Y.one() ， id="container"
myDiv.on("click", helloWorld);// Node on myDiv click， helloword
});
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 100px; background-color: pink;">
<p style="margin-top: 40px; padding-top: 40px; padding-left: 40px;">Click for Hello World test.</p>
</div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
axios 요청 차단, 응답 차단,router 내비게이션 수위
axios 요청 차단: 요청 헤더에 token 등을 통일적으로 추가할 수 있습니다
axios 응답 차단: 로그인 판단
내비게이션 선행 수위beforeEach: 로그인 여부를 판단할 수 있지만, 응답으로 차단하는 것이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<!-- YUI -->
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y)
{
var helloWorld =
function(e)
{
e.target.setHTML("<p>Hello World!</p>");
e.target.setStyle('background-color', 'orange');
};// helloword
var myDiv = Y.one("#container");//Y.one() ， id="container"
myDiv.on("click", helloWorld);// Node on myDiv click， helloword
});
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 100px; background-color: pink;">
<p style="margin-top: 40px; padding-top: 40px; padding-left: 40px;">Click for Hello World test.</p>
</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
axios 요청 차단, 응답 차단,router 내비게이션 수위axios 요청 차단: 요청 헤더에 token 등을 통일적으로 추가할 수 있습니다 axios 응답 차단: 로그인 판단 내비게이션 선행 수위beforeEach: 로그인 여부를 판단할 수 있지만, 응답으로 차단하는 것이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
