رویدادها یا eventهای delegate رویدادهایی هستند که به عنصرهای اصلی متصل نمی‌شوند. برای مثال چنانچه یک جدول با ۱۰۰ ردیف و ۱۰ ستون داشته باشیم، و بخواهیم زمان کلیک شدن روی یک سلول از این موضوع با خبر شویم، با پیوست کردن رویداد click به عنصر table می‌توانیم از وقوع کلیک روی هر سلول باخبر شویم.
علت عملکرد رویدادهای delegate این است که اغلب مرورگرها، رویدادها را به صورت درختی منتشر میکنند. یعنی در هنگام کلیک روی یک عنصر td، عنصرهای tr، tbody، table و body به ترتیب از این رویداد مطلع خواهند شد.
<div id="parent">
<div id="child1">
<div id="child2">
<div id="child3"></div>
</div>
</div>
</div> $('#parent').on('click', function (event) {
});
$('#child1').on('click', function (event) {
});
$('#child2').on('click', function (event) {
}); $(document).on('click', '#parent, #child1, #child2, #child3', function (event) {
}); $('.post .edit').on('click', function (event) {
}); $(document).on('click', '.post .edit', function (event) {
}); var elemnt = $(event.target);
if (elemnt.attr('id') === 'parent') {
alert('this is parnet');
}
else if (elemnt.attr('id') === 'child2') {
alert('this is child2');
} $(document).ready(function () {
$(document).on('click','#parent', function (event) {
});
$(document).on('click','#child1', function (event) {
});
$(document).on('click','#child2', function (event) {
event.st
});
}); a:first
p:odd
p:even
| توضیح | فیلتر |
| اولین عنصر که با شرط ما مطابقت میکند را انتخاب میکند، li a:first اولین لینکی را که فرزند لیست به حساب می‌آیند؛ را بر میگرداند | :first |
| آخرین عنصری که با شرط ما مطابقت کند را انتخاب میکند. li a:last آخرین لینک از فرزندان لیست را برمی گرداند. | :last |
| اولین فرزند عنصر که با شرط ما مطابقت میکند را انتخاب میکند. li a:first-child اولین عنصر لینک از هر لیست را برمی گرداند. | :first-child |
| آخرین فرزند عنصر که با شرط ما مطابقت میکند را انتخاب میکند. li a:last-child اولین عنصر لینک از هر لیست را برمی گرداند. | :last-child |
| تمام عناصری که پدر انها تنها همان فرزند را داد، برمی گرداند. | :only-child |
| nامین فرزند عنصری که با شرط ما مطابقت داشته باشد را انتخاب میکند. li: nth-child:(2) //comment دومین عنصر از هر لیست را برمی گرداند. | :nth-child(n) |
| فرزندان زوج یا فرد عنصر را انخاب میکند. li:nth-child(even) //commentتمام عناصر زوج لیست‌ها را بر میگرداند. | :nth-child(even یا odd) |
| nامین فرزند عنصری که از طریق فرمول ارایه شده به دست می‌آید را انتخاب میکند. اگر Y صفر باشد، نیازی به نوشتن آن نیست. li:nth-child(3n)//comment تمام عناصر ضریب 3 لیست‌ها را بر میگرداند، در حالی که li:nth-child(5n+1)// comment عناصری از لیست را برمیگرداند که بعد از عنصرهای ضریب 5 لیست‌ها قرار گرفته باشند. | :nth-child(Xn+Y) |
| تمام عناصر زوج یا فرد که با شرط ما مطابقت کنند را انتخاب میکند. li:evenتمامی عناصر زوج لیست‌ها را بر میگرداند. | :even |
| n امین عنصر انتخاب شده را برمی گرداند. | :eq(n) |
| عناصر بعد از n امین عنصر را بر میگرداند. (در واقع عناصری که بزرگتر از عنصر n ام هستند را بر میگرداند) | :gt(n) |
| عناصر قبل از n امین عنصر را بر میگرداند. (در واقع عناصری که کوچکتر از عنصر n ام هستند را بر میگرداند) | :lt(n) |
<table id="languages">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr>
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr>
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>table#languages tbody td:first-child
table#languages tbody td:nth-child(1)
:nth-child(2)
:nth-child(3) یا :last-child
var personViewModel = {
firstName: ko.observable("Masoud"),
lastName: ko.observable("Pakdel")
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};<span data-bind='text: fullName'></span>
function Product(name, price) {
this.name = ko.observable(name);
this.price = ko.observable(price);
}this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);<table>
<thead><tr>
<th>Product</th>
<th>Price</th>
</tr></thead>
<tbody data-bind='foreach: shoppingCart'>
<tr>
<td data-bind='text: name'></td>
<td data-bind='text: price'></td>
</tr>
</tbody>
</table><button data-bind='click: addProduct'>Add Beer</button>
this.addProduct = function() {
this.shoppingCart.push(new Product("More Beer", 10.99));
};function PersonViewModel()
{
this.firstName = ko.observable("John");
this.lastName = ko.observable("Smith");
this.checkout = function () {
alert("Trying to checkout");
};
this.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
}, this);
this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);
this.addProduct = function () {
this.shoppingCart.push(new Product("More beer", 10.99));
};
};this.removeProduct = function(product) {
self.shoppingCart.remove(product);
}; function PersonViewModel() {
var self = this;<tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> <td><button data-bind='click: $root.removeProduct'>Remove</button></td> </tr>
- متصل شدن کاربران (login connections) قطع شدن ارتباط یک login
- اجرای دستورات T-SQL، شروع و پایان اجرای یک رویه، شروع و پایان یک دستور در طول اجرای یک رویه، اجرای رویه‌های دور Remote Procedure Call
- باز شدن یک Cursor
- بررسی و کنترل مجوزهای امنیتی
- SQL:BatchCompleted
- Audit Login
- Audit Logout
- Lock: Acquired
- Lock: Released
| الگو | هدف |
| Blank | ایجاد یک Trace کلی |
| SP_Counts | ثبت اجرای هر رویه ذخیره شده برای تشخیص اینکه هر رویه چند بار اجرا شده است |
| Standard | ثبت آمارهای کارائی برای هر رویه ذخیره شده و Queryهای عادی SQL که اجرا می‌شوند و عملیات ورود و خروج هر Login (پیش فرض) |
| TSQL | ثبت یک لیست از همه رویه‌های ذخیره شده و Queryهای عادی SQL که اجرا می‌شوند ولی آمارهای کارائی را شامل نمیشود |
| TSQL_Duration | ثبت مدت زمان اجرای هر رویه ذخیره شده و هر Query عادی SQL |
| TSQL_Grouped | ثبت تمام loginها و logoutها در طول اجرای رویه‌های ذخیره شده و هر Query عادی SQL، شامل اطلاعاتی برای شناسائی برنامه و کاربری که درخواست را اجرا میکند |
| TSQL_Locks | ثبت اطلاعات انسداد (blocking) و بن بست (deadlock) از قبیل blocked processes، deadlock chains، deadlock graphs,... . این الگو همچنین درخواستهای تمام رویه‌های ذخیره شده و تمامی دستورات هر رویه و هر Query عادی SQL را دریافت میکند |
| TSQL_Replay | ثبت اجرای رویه‌های ذخیره شده و Queryهای SQL در یک SQL Instance و مهیا کردن امکان اجرای دوباره عملیات در سیستمی دیگر |
| TSQL_SPs | ثبت کارائی برای Queryهای SQL، رویه‌های ذخیره شده و تمامی دستورات درون یک رویه ذخیره شده و نیز عملیات ورود و خروج هر Login |
| Tuning | ثبت اطلاعات کارائی برای Queryهای عادی SQL و رویه‌های ذخیره شده و یا تمامی دستورات درون یک رویه ذخیره شده |
| گروه رویداد | هدف |
| Broker | 13 رویداد برای واسطه سرویس (Service Broker) |
| CLR | 1 رویداد برای بارگذاری اسمبلی‌های CLR (Common Language Runtime) |
| Cursors | 7 رویداد برای ایجاد، دستیابی و در اختیار گرفتن Cursor |
| Database | 6 رویداد برای رشد/کاهش (grow/shrink) فایل های Data/Log همچنین تغییرات حالت انعکاس (Mirroring) |
| Deprecation | 2 رویداد برای آگاه کردن وضعیت نابسامان درون یک SQL Instance |
| Errors and Warnings | 16 رویداد برای خطاها، هشدارها و پیغام‌های اطلاعاتی که ثبت شده است |
| Full Text | 3 رویداد برای پیگیری یک شاخص متنی کامل |
| Locks | 9 رویداد برای بدست آوردن، رها کردن قفل و بن بست (Deadlock) |
| OLEDB | 5 رویداد برای درخواستهای توزیع شده و RPC (اجرای رویه‌های دور) |
| Objects | 3 رویداد برای وقتی که یک شی ایجاد، تغییر یا حذف میشود |
| Performance | 14 رویداد برای ثبت نقشه درخواست‌ها (Query Plan) برای استفاده نقشه راهنما (Plan Guide) به منظور بهینه سازی کارائی درخواست ها، همچنین این گروه رویداد در خواست‌های متنی کامل (full text) را ثبت میکند |
| Progress Report | 10 رویداد برای ایجاد Online Index |
| Query Notifications | 4 رویداد برای سرویس اطلاع رسان (Notification Service) |
| Scans | 2 رویداد برای وقتی که یک جدول یا شاخص، پویش میشود |
| Security Audit | 44 رویداد برای وقتی که مجوزی استفاده شود، جابجائی هویتی رخ دهد، تنظیمات امنیتی اشیائی تغییر کند،یک SQL Instance شروع و متوقف شود و یک Database جایگزین شود یا از آن پشتیبان گرفته شود |
| Server | 3 رویداد برای Mount Tape، تغییر کردن حافظه سرور و بستن یک فایل Trace |
| Sessions | 3 رویداد برای وقتی که Connectionها موجود هستند و یک Trace فعال میشود، همچنین یک Trigger و یک تابع دسته بندی(classification functions) مربوط به مدیریت منابع(resource governor) رخ دهد |
| Stored Procedures | 12 رویداد برای اجرای یک رویه ذخیره شده و دستورات درون آن ، کامپایل مجدد و استفاده از حافظه نهانی (Cache) |
| Transactions | 13 رویداد برای شروع، ذخیره ، تائید و لغو یک تراکنش |
| TSQL | 9 رویداد برای اجرای Queryهای SQL و جستجوهای XQUERY (در داده‌های XML) |
| User Configurable | 10 رویداد که شما میتوانید پیکربندی کنید |
| Select counters from list | Performance Object |
| Output Queue Length | Network Interface |
| % Processor Time | Processor |
| Processor Queue Length | System |
| Buffer Manager:Page life expectancy | SQLServer |
SELECT * INTO dbo.BaselineTrace
FROM fn_trace_gettable(' c:\performance baseline.trc ', default); <div>
Number Of Clicks <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: clickMe">Click me</button>
</div>
<script type="text/javascript">
var viewModel = {
numberOfClicks : ko.observable(0),
clickMe: function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
</script> <ul data-bind="foreach: places">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['Tehran', 'Esfahan', 'Shiraz']);
self.removePlace = function(place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script> <button data-bind="click: myFunction">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
} else {
}
}
};
ko.applyBindings(viewModel);
</script> <div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler">
Click me
</button>
</div> <div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div> در Asp.net دو چرخه‌ی حیات مهم
وجود دارند که اساس چارچوب MVC را تشکیل می‌دهند
:
تمرکز بنده بیشتر بر روی روند و مسیری است که یک درخواست طی میکند و قصد دارم با بهره گیری از کتاب Pro Asp.net Mvc 5 و دیگر منابع، چرخه‌ی حیات درخواست را در برنامه‌های Mvc بررسی کرده و در مقالات آتی ماژولها و هندلرها را بررسی کنم.
در asp.net ، برنامه global فایلهای شامل دو فایل Global.asax , Global.asax.cs است.
فایل Global.asax که هیچ گاه نیاز به ویرایش آن نداریم محتویاتی مانند زیر دارد:
<%@ Application Codebehind="Global.asax.cs" Inherits="YourAppName.MvcApplication" Language="C#" %>
در این مقاله منظور از فایل global فایل Global.asax.cs است که مشتق شده از کلاس System.Web.HttpApplication است:
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
...//
}
} Asp.net برای پاسخگویی به درخواستهای واصله، وهله‌هایی از کلاس MvcApplication را می‌سازد ولی این دو متد صرفا در نقاط شروع و پایان برنامه فراخوانی شده و عملا در وهله‌های یاد شده صدا زده نخواهند شد و به جای آنها رویدادهایی را که در ذیل آنها را معرفی می‌کنیم، فراخوانی شده و چرخه‌ی حیات درخواست را برای ما مشخص می‌سازند .
BeginRequest : به عنوان اولین رویداد، به محض وصول یک درخواست جدید رخ خواهد داد.AuthenticateRequest ,PostAuthenticateRequest : رویداد AuthenticateRequest برای شناسایی کاربر ارسال کننده درخواست، کاربرد دارد و پس از پردازش کلیه‌ی توابع، رویداد PostAuthenticateRequest صدا زده میشود.
AuthorizeRequest :به‌هنگام صدور مجوزهای یک درخواست رخ میدهد و مشابه رویداد بالا پس از پردازش کلیه‌ی توابع، رویداد PostAuthorizeRequest صدا زده خواهد شد.ResolveRequestCache : پس از صدور مجوزهای یک درخواست در رویداد authorization زمانیکه ماژولهای کش می‌خواهند اطلاعاتی را از کش سرور مطالبه کنند، رخ میدهد و به مانند دو رخداد قبلی، PostResolveRequestCache نیز پس از اتمام پردازش توابع رویداد رخ میدهد.
MapRequestHandler : زمانی که Asp.net می‌خواهد هندلری را برای پاسخگویی به درخواست واصله انتخاب کند رخ میدهد و PostMapRequestHandler نیز پس از این انتخاب، تریگر میشود.AcquireRequestState : جهت بدست آوردن داده‌هایی نظیر سشن و ... مرتبط با درخواست جاری کاربرد داشته و PostAcquireRequestState نیز پس از پردازش توابع رویداد رخ خواهد داد.
PreRequestHandlerExecute : بالافاصله قبل و همچنین بلافاصله بعد از این که یک هندلر بخواهد درخواستی را پردازش کند، رخ میدهد. PostRequestHandlerExecute نیز همانند دیگر رویدادهای گذشته، پس از اتمام پردازش توابع، این رویداد رخ خواهد داد.ReleaseRequestState : زمانی رخ میدهد که داده‌های مرتبط با درخواست جاری، در ادامه‌ی روند پردازش درخواست مورد نیاز نباشند و پس از پردازش توابع رویداد، PostReleaseRequestState رخ خواهد داد .
UpdateRequestCache : به جهت اینکه ماژولهای مسئول کش، توانایی به روز رسانی داده‌های خود، برای پاسخگویی به درخواستهای بعدی را داشته باشند، این رویداد رخ میدهد.
LogRequest : قبل از انجام عملیات لاگین برای درخواست جاری رخ میدهد و پس از پردازش توابع رویداد نیز PostLogRequest تریگر میشود.EndRequest : پس از پایان کار پردازش درخواست جاری و مهیا شدن پاسخ مرتبط جهت ارسال به مرورگر تریگر خواهد شد.
PreSendRequestHeaders : قبل از ارسال HTTP headers به مرورگر این رویداد رخ خواهد داد.
PreSendRequestContent : بعد از ارسال شدن هدرها و قبل از ارسال محتوای صفحه به مرورگر رخ میدهد.Error : هر زمان و در هر مرحله از پردازش درخواست، چنانچه خطایی صورت پذیرد این رویداد رخ خواهد داد.
فریم ورک Asp.net جهت مدیریت بهتر یک درخواست، در تمام مسیر پردازش، رویدادهای بالا را مهیا کرده است. در ادامه نحوه‌ی هندل کردن رویدادهای چرخه‌ی حیات درخواست را در فایل global توضیح می‌دهم. هر چند که استفاده از این فایل بدین منظور، صرفا برای مدیریت مسائل ابتدایی مناسب بوده و در یک پروژه‌ی بزرگ موجب به هم ریختگی فایل global با کدهای زیاد و خوانایی پایین بوده که قابلیت استفاده مجدد در دیگر پروژه‌ها را نیز ندارد.
Asp.net این مشکل را با معرفی ماژولها که در مقالات آتی توضیح خواهم داد، مرتفع کرده است.
در فایل global هر گاه متدی را با پیشوند Application_ و نام یکی از رویدادهای بالا بنویسید Asp.net آن را به عنوان هندلری برای رویداد مذکور می‌شناسد. به عنوان مثال متدی با نام Application_BeginRequest متد رویداد BeginRequest میباشد.
ابتدا یک پروژه‌ی MVC جدید را به نام SimpleApp ایجاد کرده و فایل global آن را مطابق ذیل تغییر می‌دهیم:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace SimpleApp
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
protected void Application_BeginRequest()
{
RecordEvent("BeginRequest");
}
protected void Application_AuthenticateRequest()
{
RecordEvent("AuthenticateRequest");
}
protected void Application_PostAuthenticateRequest()
{
RecordEvent("PostAuthenticateRequest");
}
private void RecordEvent(string name)
{
List<string> eventList = Application["events"] as List<string>;
if (eventList == null)
{
Application["events"] = eventList = new List<string>();
}
eventList.Add(name);
}
}
} در اینجا متدی به نام RecordEvent را در کدهای ذکر شده مشاهده می‌کنید که نام یک رویداد را دریافت و جهت در دسترس قرار دادن در کل برنامه به خاصیت Application از کلاس HttpApplication نسبت داده و متد مذکور را از سه متد دیگر فراخوانی کرده‌ایم. این متدها در زمان رخ دادن رویدادهای BeginRequest, AuthenticateRequest, PostAuthenticateRequest صدا زده خواهند شد.
حال جهت نمایش اطلاعات رویداد نیاز است تغییراتی مشابه ذیل در کنترلر Home ایجاد نماییم.
using System.Web.Mvc;
namespace SimpleApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(HttpContext.Application["events"]);
}
}
} ویوی مرتبط با اکشن متد index را مطابق کدهای ذیل بازنویسی می‌کنیم:
@model List<string>
@{
ViewBag.Title = "Events List";
}
<h5>Events</h5>
<table>
@foreach (string eventName in Model)
{
<tr>
<td>@eventName</td>
</tr>
}
</table> 
table#tblUsers.table.table-striped.table-bordered.table-hover>thead>tr>th{row}+th{Name}+th{Last Name}+th{Operations}^^tbody>tr*6>(td{row}+td{FirstName}+td{LastName}+td>button.btn.btn-primary{Edit}+button.btn.btn-danger{Delete})<table id="tblUsers" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>row</th>
<th>Name</th>
<th>Last Name</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td>row</td>
<td>FirstName</td>
<td>LastName</td>
<td>
<button>Edit</button>
<button>Delete</button></td>
</tr>
<tr>
<td>row</td>
<td>FirstName</td>
<td>LastName</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>row</td>
<td>FirstName</td>
<td>LastName</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>row</td>
<td>FirstName</td>
<td>LastName</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>row</td>
<td>FirstName</td>
<td>LastName</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
<tr>
<td>row</td>
<td>FirstName</td>
<td>LastName</td>
<td>
<button class="btn btn-primary">Edit</button>
<button class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>ul>li[ng-repeat="user in Users"]>p[ng-bind="{{user.UserName}}"]+a{Details}<ul>
<li ng-repeat="user in Users">
<p ng-bind="{{user.UserName}}"></p>
<a href="">Details</a>
</li>
</ul><!-- Type this --> div.container <!-- Creates this --> <div class="container"></div>
<!-- Type this --> ul#userList <!-- Creates this --> <ul id="userList"></ul>
<!-- Type this --> div.container#wrapper <!-- Creates this --> <div class="container" id="wrapper"></div>
<!-- Type this --> button.btn.btn-primary <!-- Creates this --> <button class="btn btn-primary"></button>
<!-- Type this --> .container <!-- Creates this --> <div class="container"></div>
<!-- Type this -->
div.container>div#header
<!-- Creates this -->
<div class="container">
<div id="header"></div>
</div><!-- Type this -->
div.navbar>div.navbar-inner>ul.navbar
<!-- Creates this -->
<div class="navbar">
<div class="navbar-inner">
<ul class="navbar"></ul>
</div>
</div><!-- Type this --> div[title] <!-- Creates this --> <div title=""></div>
<!-- Type this --> input[type="text" placeholder="First Name"] <!-- Creates this --> <input type="text" value="" placeholder="First Name" />
<!-- Type this -->
ul[ng-repeat="user in Users"]>li[ng-model="user.FirstName"]
<!-- Creates this -->
<ul ng-repeat="user in Users">
<li ng-model="user.FirstName"></li>
</ul>{} متن (Text)
این عملگر، متن مورد نظر شما را داخل عنصر قرار میدهد.
<!-- Type this -->
div>h1{My Title}
<!-- Creates this -->
<div>
<h1>My Title</h1>
</div><!-- Type this -->
form>input[type="text"]+input[type="checkbox"]
<!-- Creates this -->
<form>
<input type="text" value="" />
<input type="checkbox" value="" />
</form><!-- Type this -->
div#header>img+h1{Title}
<!-- Creates this -->
<div id="header">
<img src="" alt="" />
<h1>Title</h1>
</div><!-- Type this -->
table>thead>tr>th{row}^^tbody>tr>td{row1}
<!-- Creates this -->
<table>
<thead>
<tr>
<th>row</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
</tr>
</tbody>
</table><!-- Type this -->
ul>li*3>p{Hello}
<!-- Creates this -->
<ul>
<li>
<p>
Hello
</p>
</li>
<li>
<p>
Hello
</p>
</li>
<li>
<p>
Hello
</p>
</li>
</ul><!-- Type this -->
(div.container>h1{title}+div.content{Some Text Here})*2
<!-- Creates this -->
<div class="container">
<h1>title</h1>
<div class="content">
Some Text Here
</div>
</div>
<div class="container">
<h1>title</h1>
<div class="content">
Some Text Here
</div>
</div><!-- Type this -->
ul>li*2>p{item $}
<!-- Creates this -->
<ul>
<li>
<p>
item 1
</p>
</li>
<li>
<p>
item 2
</p>
</li>
</ul><!-- Type this -->
ul>li*2>p{item $$$}
<!-- Creates this -->
<ul>
<li>
<p>
item 001
</p>
</li>
<li>
<p>
item 002
</p>
</li>
</ul><!-- Type this -->
div>(header>div)+section>(ul>li*2>a)+footer>(div>span)
<!-- Creates this -->
<div>
<header>
<div></div>
</header>
<section>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<footer>
<div>
<span></span>
</div>
</footer>
</section>
</div><!-- Type this -->
div>(h1>lorem5)+(h3>lorem3)
<!-- Creates this -->
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<h3>Lorem ipsum dolor.</h3>
</div>e.preventDefault() e.stopPropagation()
<html>
<body>
<div onclick="document.body.appendChild(outter)" style='border:solid 1px'>
Outer Div
<a id="inner" href="index2.htm">index2</a>
</div>
<script>
var outter = document.createElement('div');
outter.innerText = 'outter';
var inner = document.createElement('div');
inner.innerText = 'inner';
document.getElementById('inner').onclick = function(e) {
e = e || window.event;
document.body.appendChild(inner);
//e.preventDefault();
//e.stopPropagation();
//e.returnValue = false;
return false;
};
</script>
</body>
</html>
$().click(fn)
$().bind('click',fn)
$().live('click',fn)
$().delegate(selector, 'click', fn)
$().on('click',fn);
$().on('click', selector ,fn); $(".test").bind( "click mouseover mouseout", function() { console.log('fired!') } ); $(".test").unbind( "click"); $("#area").delegate('.test','click',function(e){...});
----------------------------------------
<div id="area">
<span>Span1</span>
<span>Span2</span>
</div> $("#area").on('click','.test',function(e){...}); $("body").on('click','.test',function(e){...}); <div> <a> <b>text</b> </a> </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-migrate-1.4.1.js"></script>
<script>
$(document).ready(function(){
$(".myspan").on( "click",".test", function(e) {
e.stopPropagation();
console.log('test fired!') } );
$(".myspan").on( "click", function() { console.log(' myspan fired!') } );
$(".mydiv").on( "click", function() { console.log(' mydiv fired!') } );
});
</script>
</head>
<body>
<div class="mydiv">
<span class="myspan">
<button type="button" class="test">Ok</button>
</span>
</div>
</body>
</html> $().on({
'click': function (e) {
// function
},
'hover': function (e) {
// function
}
});