YUI的简单的dom事件

2016-02-20 00:58 8 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享YUI的简单的dom事件,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

今天我们要了解的是YUI的简单的dom事件。

主要包括:点击事件和阻止默认事件的方法:

1、有一个蓝色背景的方框,点击他以后,会弹出一个对话框,其实这里就是原生js中的alert的效果;

2、一个普通的链接,点击以后,带你进入新的页面;

3、一个链接,但是被yui阻止它的默认事件,就是阻止了链接,他只会弹出一个对话框,但是不会离开当前页面。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

下面我们就来看看代码。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

上面的代码需要大家注释的是,在head引用了yui-min.js的链接,使用了YUI().use(‘node’, function(Y) {});将我们需要的代码框起来,还使用了Y.on(click, helloWorld, #container);方法来实现点击事件,使用了e.preventDefault();实现阻止默认事件。

来源:https://www.tulaoshi.com/n/20160220/1632954.html

延伸阅读
标签: Web开发
被AJAX中DOM的操作郁闷了好几天,今天总算搞明白了,自学就是苦啊,苦的一把鼻涕一把泪的,把教训些出来,给后来者提个醒,老鸟就不要看了。 1.DOM中的对XML的操作不要和浏览器中的弄混掉了,比如getElementByName是浏览器中内置document对象的DOM操作,你用来操作responseXML就是错误的.在浏览器中,你可以使用document.getElementsByName...
标签: Web开发
代码如下: 代码如下: !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=gb2312" title无标题文档/title script src="jquery-1.4.2.min.js" type="text/javascript"/script script language="javascr...
标签: Web开发
先来看一张简单的文档树 很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系: NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes[0] = NodeA1 NodeA.childNodes[1] = NodeA2 NodeA.childNodes...
标签: Web开发
在很多语言的学习中,事件都是一个比较难理解,但是又是一个很重要的概念。javascript中的事件处理也是一样,正因为有了事件处理,才会出现Ajax拖动的效果。本文就讨论一下JavaScript中的事件处理,读过之后,您就会知道,很多Ajax框架实现拖动效果的原理了。 一、 IE Event对象 (一)IE Event对象的主要属性和方法 在IE中有一个专...

经验教程

673

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部